<body>
<div id = "app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li>-->
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete = "handleItemDelete"><!--监听事件-->
</todo-item>
</ul>
</div>
<script>
/*Vue.component("TodoItem",{//全局组件
props:["content"],
template :"<li>{{content}}</li>"
})*/
var TodoItem = {
//局部组件，需要在实例中声明
props:["content","index"],
template :"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function () {
this.$emit("delete",this.index);//触发事件
}
}
}
var app =new Vue({//创建实例
el:"#app",//实例负责管理的dom区域
components:{
//子组件声明
TodoItem: TodoItem,
},
data:{
list: [],
inputValue: ""
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue);
this.inputValue="";
},
handleItemDelete:function (index) {
this.list.splice(index,1);
}
}
})
</script>
</body>
