1.4—组件化应用与创建

//在js中可以定义组件（开头定义的话则是为全局组件）
Vue.component('cpt',{
    template: "<li>组件元素内容</li>"
});
相当于：var cpt="<li>xxxxxxx</li>"
//运用方式：
<ul>
    <cpt></cpt>
</ul>

注意一定要在JS实例化后才可识别生效

 

<div id="app">
    <ul>
        <todo-item v-for="item in gos" v-bind:todo="item" v-bind:key="item.id"></todo-item>
    </ul>
</div>
<script>
    Vue.component('todo-item',{
        props:['todo'],
        template:'<li>{{todo.text}}</li>'
    })
    var app_1=new Vue({
        el:'#app',
        data:{
            gos:[
                {id:0,text:'我是00'},
                {id:1,text:'我是11'},
                {id:2,text:'我是22'},
            ]
        }
    })
</script>