1. Vue中常用的按键别名:
回车=>enter
删除=>delete(捕获“删除”和“退格”键)
退出=>esc
空格=>space
换行=>tab(特殊，必须配合keydown使用)
上=>up
下 =>down
左=>left
右=>right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
3. 系统修饰键（用法特殊): ctrl、alt、shift、meta(win键)
(1).配合keyup使用: 按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用: 正常触发事件。
4. 也可以使用keyCode去指定具体的按键(不推荐，已从web标准中移除,详见MDN)
5. Vue.config.keyCodes.自定义排名=键码，可以去定制按键别名
6. 组合键可以在@keyup @keydown后面连续写多个，如：@keyup.ctrl.alt.y
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/vue-2.5.9.js"></script>
</head>
<!--
1. Vue中常用的按键别名:
回车 => enter
删除 => delete(捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab(特殊,必须配合keydown使用)
上 => up
下 => down
左 => left
右 => right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
3. 系统修饰键（用法特殊): ctrl、alt、shift、meta(win键)
(1).配合keyup使用: 按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用: 正常触发事件。
4. 也可以使用keyCode去指定具体的按键(不推荐,已从web标准中移除,详见MDN)
5. Vue.config.keyCodes.自定义排名=键码，可以去定制按键别名
-->
<body>
<div id="root">
<h2>欢迎学习{{name}}~</h2>
<input type="text" name="" placeholder="按下Enter提示输入" id="" @keyup.enter="onkey">
<input type="text" name="" placeholder="按下CapsLock提示输入" id="" @keyup.caps-lock="onkey">
<!-- 按下tab键会切走焦点，用keyup绑定不生效，应该用keydown -->
<input type="text" name="" placeholder="按下Tab提示输入" id="" @keydown.tab="onkey">
<!-- 系统修饰键 -->
<input type="text" name="" placeholder="按下Ctrl提示输入" id="" @keyup.ctrl="onkey">
<!-- 组合键可以在@keyup @keydown后面连续写多个 -->
<input type="text" name="" placeholder="按下Ctrl+Alt+Y提示输入" id="" @keyup.ctrl.alt.y="onkey">
</div>
</body>
<script>
let vm = new Vue({
el: '#root',
data: {
name: '键盘事件'
},
methods: {
onkey: function (e) {
// 如果一个按键名/按键编码未知，可以用keyup事件打印event.key或者event.keyCode查看
console.log('key is --> ', e.key, e.keyCode);
console.log('value:', e.target.value);
}
}
})
</script>
</html>
标签：Vue,keyup,keydown,键盘,事件,key,按键,keyCode From： https://www.cnblogs.com/ximu1009/p/17770271.html