The most basic character component pass value, simple TODOList
1. Parent-to-child props can also be understood as attribute values
2. Son to Father $emit
3. Monitor the carriage return event
(1) @keyup.enter
(2) @keydown="test"
test(ev){if(ev.keyCode===13)}
4. Because vue is MVVM, almost all data is manipulated, and dom is not manipulated
5. Code
<body>
<div id="app">
{{message}}
<input type="text" v-model="msg" placeholder="请输入信息" @keydown="enterToLogin" /><button type="button" @click=addMsg>点击</button>
<ul>
<to-item v-for="(item,index) in msgs" :conment="item" :index="index" @delete="deleteItem"></to-item>
</ul>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script>
//Enter event
//@keyup.enter="addMsg"
//Extract component
//Global Component
/*Vue.component('ToItem',{
props:['conment','index'],//Parent-like-child value =="props
template:'<li @click="buddleDelete">{{this .conment}}</li>',
methods:{
buddleDelete(){
this.$emit('delete',this.index)//The child passes the value like the parent=="$emit
}
}
})*/
// Partial component
var toItem={
props:['conment','index'],
template:'<li>{{this.conment}}<li>',
template:'<li @click="buddleDelete">{{this.conment}}</li>',
methods:{
buddleDelete(){
this.$emit('delete',this.index)//子像父传值==》$emit
}
}
}
var vueEg=new Vue({
el:'#app',
data(){
return {
message:'hello',
msg:'',
msgs:[],
}
},
components:{//Be sure to remember It is components =" because there are multiple
toItem:toItem
},
methods:{
addMsg(){
this.msgs.push(this.msg)
this.msg=''
},
deleteItem(index){//The index here is directly Can get
this.msgs.splice(index,1)//Delete an element at the current coordinates
},
enterToLogin(ev){//Use keydown to implement the carriage return event
if(ev.keyCode === 13)
this. addMsg();
}
}
});
</script>