1. 基本的新建组件
//新建一个组件
Vue.component(todo-item,{
template: '<li>这是个待办项</li>'
})
/*使用组件*/
<div id='app'>
<todo-item></todo-item>
</div>
2. 带特性prop的组件
Vue.component('todo-item',{
props:['todo'],
template: '<li>{{todo.text}}</li>'
})
/*组件的使用*/
<div id='app'>
<todo-item
v-for = 'item in list'
v-bond:todo='item'
>
</todo-item>
</div>
<script>
var app = new Vue({
el:'app',
data:{
list:[
{text:123},
{text:234},
{text:345},
{text:456}
]
}
})
</script>