vue学习记录——2

组件化应用构建

    组件系统是vue的另一个重要特征，可以将大型应用拆分为小型的、独立的、可复用的小组件，从而可以使大型应用的页面逻辑更加清晰，也大幅降低了页面编写的工作量。

    一个页面打印出列表的demo:

<!--HTML-->
<div id="four">
    <todo_item v-for="item in groceryList" v-bind:todo="item" 
      						v-bind:key="item.id"></todo_item>
</div>

<!--JS-->
<script>
    Vue.component('todo_item',{
        props:['todo'],
        template:'<li>{{todo.text}}</li>'
    })

    new Vue({
        el:'#four',
        data:{
            groceryList:[
                {id:0,text:'zero'},
                {id:1,text:'one'},
                {id:2,text:'two'},
            ]
        }
    })
</script>

Vue.component:自定义一个组建
用法：Vue.component(‘组件名’,{组件内容})
    props:[‘todo’] //接收到的props数据命名为todo
    template:’< li>{{todo.text}}< /li>’ //为组件定义模板

思维逻辑：在上述代码过程中，通过new一个Vue对象并将其绑定在id为four的div上；data中定义了一个数组groceryList传入到’#four’中；新定义组件todo_item拿到数组元素后，通过v-for指令解析出数组元素item；v-bind指令将item赋值到组件元素props中，并传入到组件模板template，形成列表。