<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
</head>
<body>
<div id="root">
<h2>欢迎来学习{{name}}</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
<input type="text" placeholder="按下ctrl+y提示" @keyup.ctrl.y="showInfo">
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
Vue.config.productionTip = false;
Vue.config.keyCodes.huiche = 13;
new Vue({
el: '#root',
data: {
name: 'vue'
},
methods: {
showInfo(e) {
// if(e.keyCode === 13){
// console.log(e.target.value);
// }
console.log(e.target.value);
}
}
});
</script>
</body>
</html>
知识点：
1：keydown和keyup：keydown按下键盘就会执行，keyup按下然后松手执行。
2：vue中常用的按键别名
回车 =》enter
删除 =》delete(捕获删除和退格)
退出 =》esc
空格 =》space
换行 =》tab (特殊，多配合keydown去使用)
上 =》up
下 =》down
左 =》left
右 =》right
3：vue未提供别名的按键，可以使用按键原始的key名去绑定。但注意要转换为kebab-case(短横线命名)
4：系统修饰符（用法特殊）ctrl,alt,shift,meta
(1)配合keydown使用，正常触发事件。
(2)配合keyup使用，按下修饰键的同时，按下其他键，随后释放其他键，事件才会被触发。
5：也可以使用keyCode去指定具体的按键。（不推荐）
6：Vue.config.keyCodes.自定义别名 =键码，可以去定制按键别名。
网友评论