<div id="root">
<!--模板-->
<input v-model="inputValue" type="text" autofocus=true />
<button @click="handleSubmit">提交</button>
<ul>
<!--子组件-->
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
// 每一个组件都是一个实例
// Vue.component注册或获取全局组件
Vue.component('todo-item',{
// props 可以是数组或对象,用于接收来自父组件的数据
props:['content','index'],
template:'<li @click="handleClick">{{content}}{{index}}</li>',
methods:{
handleClick:function(){
// $emit触发当前实例上的事件。附加参数都会传给监听器回调。
this.$emit('delete',this.index)
}
}
})
// var TodoItem={
// template:'<li>item</li>'
// }
//实例
new Vue({
// 挂载点
el:"#root",
data:{
inputValue:"",
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=""
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>