to-do-list
2195 ワード
<script type="text/javascript" src="js/vue.js"/>
<div id="example">
<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>
</code></pre>
<br/>
</div>
</div>
</div>
</div>