最基础的字符组件传值,简单的TODOList
1、父传 子 props 也可以理解成属性值
2、 子传父 $emit
3、监听回车事件
(1) @keyup.enter
(2) @keydown="test"
test(ev){if(ev.keyCode===13)}
4、因为vue是MVVM 所以几乎全部操作数据，不操作dom
5、代码
<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>
//回车事件
//@keyup.enter="addMsg"
//抽出组件
//全局组件
/*Vue.component('ToItem',{
props:['conment','index'],//父像子传值 ==》props
template:'<li @click="buddleDelete">{{this.conment}}</li>',
methods:{
buddleDelete(){
this.$emit('delete',this.index)//子像父传值==》$emit
}
}
})*/
//局部组件
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:{//一定记住是components =》 因为是多个
toItem:toItem
},
methods:{
addMsg(){
this.msgs.push(this.msg)
this.msg=''
},
deleteItem(index){//这里的index直接就能获取到
this.msgs.splice(index,1)//在当前坐标下 删除一个元素
},
enterToLogin(ev){//利用keydown来实现回车事件
if(ev.keyCode === 13)
this.addMsg();
}
}
});
</script>