键盘事件语法糖：
@keydown ——按下了就触发，不用抬起
@keyup ——抬起后触发
1.Vue中常用的按键别名：
使用 ——> @keyup.enter=" "
回车 => enter
删除 => delete
退出 => esc
空格 => space
切换 => tab
==**注意tab要使用keydown,因为按下后焦点就切换掉了，无法使用keyup** ==
上 => up
下 => down
左 => left
右 => right
换行 => tab (特殊，必须配合keydown去使用)
2.vue未提供别名的按键，可以使用按键原始的key值去绑定它，
但注意要变化为 kebasb-case(短横线命名) eg:——caps-lock
(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发
(2)配合keydown使用正常触发
(3)可配合特定按键一起 @keyup.ctrl.xxx=" " @keyup.ctrl.z
4.也可以使用keycode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码（keycode) 可以去定制按键别名（同样不推荐）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| <body>
<!--
键盘事件语法糖：
@keydown ——按下了就触发，不用抬起
@keyup ——抬起后触发
1.Vue中常用的按键别名：
使用 ——> @keyup.enter=" "
回车 => enter
删除 => delete
退出 => esc
空格 => space
切换 => tab
==**注意tab要使用keydown,因为按下后焦点就切换掉了，无法使用keyup** ==
上 => up
下 => down
左 => left
右 => right
换行 => tab (特殊，必须配合keydown去使用)
2.vue未提供别名的按键，可以使用按键原始的key值去绑定它，
但注意要变化为 kebasb-case(短横线命名) eg:——caps-lock
3.系统修饰键 ctrl shift alt meta(win键)
(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才能被触发
(2)配合keydown使用正常触发
(3)可配合特定按键一起 @keyup.ctrl.xxx=" " @keyup.ctrl.z
4.也可以使用keycode去指定具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码（keycode) 可以去定制按键别名（同样不推荐）
-->
<div id="root">
<input type="text" placeholder="请输入内容" @keyup.ctrl.y="showInfo">
</div>
<script>
Vue.config.keyCodes.huiche=13;//定义了一格别名按键
new Vue({
el:'#root',
data:{
name:'helloworld'
},
methods:{
showInfo(e){
console.log("执行了");
console.log(e.key);
}
}
})
</script>
</body>
|
