to-do-list
锺离德庸
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<to-do-box></to-do-box>
</div>
<script type="text/javascript">
//按组件树的方式code 组件：代码复用
var bus=new Vue({});
Vue.component('to-do-item',{
props:['sendMsg','myIndex'],
methods:{
deleteItem(){
this.$emit('deleteEvent',this.myIndex);
//this.parents.msgList.splice(this.myIndex,1); 另一种方法
}
},
template:`
<li>
<button @click="deleteItem">delete</button>
<span>{{sendMsg}}</span>
</li>
`
});
Vue.component('to-do-list',{
data:function(){
return {
msgList:[]
}
},
created:function(){
//var that=this;
bus.$on('addEvent',(msg)=>{
console.log("接收到数据为："+msg);
this.msgList.push(msg);
})
},
methods:{
rcvDeleteMsg(index){
this.msgList.splice(index,1);
}
},
template:`
<ul>
<to-do-item v-for="(tmp,index) in msgList" :sendMsg="tmp" :myIndex="index" :key="index" @deleteEvent="rcvDeleteMsg"></to-do-item>
</ul>
`
});
Vue.component('to-do-input',{
data:function(){
return {
userInput:''
}
},
methods:{
handleClick(){
bus.$emit('addEvent',this.userInput);
}
},
template:`
<div>
<h2>待做事项列表</h2>
<input type="text" placeholder="请输入" v-model='userInput'/>
<button @click="handleClick">add</button>
</div>
`
});
Vue.component('to-do-box',{
template:`
<div>
<to-do-input></to-do-input>
<to-do-list></to-do-list>
</div>
`
})
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome'
}
});
</script>
</body>
</html>
类似资料：