组件化应用构建
组件系统是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,形成列表。