一，键盘事件及键值修饰符
在上一篇文章我们了解了事件修饰符，这篇文章了我们来看看键值修饰符，同样的我们列表了一些修饰符的别名：
1.enter
2.tab
3.delete (捕获 “删除” 和 “退格” 键)
4.esc
5.space
6.up
7.down
8.left
9.right
我们还可以通过全局config.keyCodes对象自定义键值修饰符别名
我们Vue.js官网会更详细的和我们讲解和举例。
接下来我们进入正题，首先在我们的index.html里面把需要的东西我们设置好，app.js里面我们先清空所有数据后面用到的时候我们在添加进去
<body>
<div id="vue-app">
<label>姓名:</label>
<input type="text">
<label>年龄:</label>
<input type="text">
</div>
</body>
new Vue({
el:"#vue-app",
data:{
},
methods:{
}
})
我们现在是一个非常干净的界面，键盘事件肯定是我们输入的地方才能触发这个键盘事件，那么这样的话我们先给我们的input绑定一个触发方法，v-on:keyup="Name-A"和v-on:keyup="Age-A"，这样就可以打入我们的名字和年龄，当然我们既然绑定了我们的方法，那我们就开始在methods写我们的方法,在写方法之前我们先写一个console.log(名字输入中)
new Vue({
el:"#vue-app",
data:{
},
methods:{
Name-A:function(){
console.log(名字输入中)
},
Age-A:function(){
console.log(年龄输入中)
}
}
})
<body>
<div id="vue-app">
<label>姓名:</label>
<input type="text" v-on:keyup="Name-A">
<label>年龄:</label>
<input type="text" v-on:keyup="Age-A">
</div>
</body>
我们保存页面之后，打开我们的控制台，我们会发现，我们不管在键盘上按下那个键，他都会对应的显示出“名字输入中”或者“年龄输入中”，这就是我们键盘事件的作用。
但是你会发现你只要按下一个键他都会显示，那么有时候我们不想这样，比方说我们想把一整句话打完，他才显示一次，那这个就是键值修饰符的作用了，我们在用软件聊天的时候，我们会打完一段话，然后按enter键 ，他才会发送出去，那么我们就在上面的代码用上这个键值修饰符试试
<body>
<div id="vue-app">
<label>姓名:</label>
<input type="text" v-on:keyup.enter="Name-A">
<label>年龄:</label>
<input type="text" v-on:keyup.enter="Age-A">
</div>
</body>
我们在回到我们控制台，在我们输入按下键盘的时候会发现，控制台并没有显示之前的字样，当按下enter键的时候他就显示出来了
二，双向数据绑定
在键值修饰符之后我们在来看看，双向数据绑定，有一点是要知道的，双向数据绑定一定和 input、select、textarea这三个是有关系的，如果想双向绑定的话，就必须有一个是输入的地方，另一个是输出的地方，我们根据上面的代码我们写一个输出的地方，我们写一个<span>的标签,有了输出，我们就要有东西输出去，我们在写个属性
<body>
<div id="vue-app">
<label>姓名:</label>
<input type="text" v-on:keyup.enter="Name-A">
<span>{{name}}</span>
<label>年龄:</label>
<input type="text" v-on:keyup.enter="Age-A">
<span>{{age}}</span>
</div>
</body>
new Vue({
el:"#vue-app",
data:{
name:" ",
age:" "
},
methods:{
Name-A:function(){
console.log(名字输入中)
},
Age-A:function(){
console.log(年龄输入中)
}
}
})
目前我们的值是空的，我们如果想要在span里面拿到我们name输入的value值我们就要有一个，ref
<body>
<div id="vue-app">
<label>姓名:</label>
<input type="text" ref="Name-B" v-on:keyup="Name-A">
<span>{{name}}</span>
<label>年龄:</label>
<input type="text" ref="Age-B" v-on:keyup="Age-A">
<span>{{age}}</span>
</div>
</body>
我们给了一个ref我们就要拿到ref里面的值，现在我们想及时拿到这个值，所以我们把inter去掉 了
new Vue({
el:"#vue-app",
data:{
name:" ",
age:" "
},
methods:{
Name-A:function(){
//console.log(名字输入中)
this.name=this.$refs.Name-B.value;
},
Age-A:function(){
//console.log(年龄输入中)
this.name=this.$refs.Age-B.value;
}
}
});
我们在回到页面在input里面输入东西的时候，我们会看到span的里面相应的也输出了值，当然我们删除的时候同样也会删除，输入和输出是同步的，同样的在Vue里面给我们提供一个指令，那么这个指令叫v-model=" "，我们用指令的话，那我们绑定的方法就没用了我们把他注释掉，那我们v-model后面跟的是一个属性，就是我们app.js里面定义的这个属性name
<body>
<div id="vue-app">
<label>姓名:</label>
<input type="text" ref="Name-B" v-model="name">
<span>{{name}}</span>
<label>年龄:</label>
<input type="text" ref="Age-B" v-model="age">
<span>{{age}}</span>
</div>
</body>
我们使用v-model这个指令和我们使用方法的效果是一样的，我们同样可以双向同步。
这是我和大家一起分享我自己所学到的一些Vue.js的基础知识，希望看到这篇文章的各位前辈多多关照，小生有哪些错误的地方希望能够指出来，也希望其他和我一样的小白能够有所帮助。
网友评论