Vue 组件

概念

简单例子

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--这样jie标签就变成定义的标签 实现代码复用-->
    <jie></jie>
</div>

<script src="js/vue.js"></script>
<script>
    Vue.component('jie',{
        template:'<li>这是个待办项</li>'
    })
    var vm=new Vue({
        el:"#app",
    });
</script>
</body>
</html>

复杂的使用

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--这样jie标签就变成定义的标签 实现代码复用-->
    <jie v-for="item in items" v-bind:hh="item">

    </jie>
</div>

<script src="js/vue.js"></script>
<script>
    Vue.component('jie',{
        /*
         jie 组件现在接受一个
         "prop"，类似于一个自定义 attribute。
         这个 prop 名为hh 用于后续的bind绑定到这上面
        */
        props: ['hh'],
        template:'<li>{{hh.id}} {{hh.name}}</li>'
    })
    var vm=new Vue({
        el:"#app",
        data:{
            items:[{id: 0,name: 'jie'},
                {id: 1,name: 'jie jie'}
                ]
        }
    });
</script>
</body>
</html>
posted @ 2021-05-08 21:15  一个经常掉线的人  阅读(42)  评论(0)    收藏  举报