Vue 键盘事件

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8" />
 5         <title>键盘事件</title>
 6         <script type="text/javascript" src="../js/vue.js"></script>
 7     </head>
 8     <body>
 9 <!-- 
10     1.Vue 键盘事件，常用按键别名：
11         回车： enter
12         删除： delete （捕获“删除”和“退格”键）
13         空格： space
14         换行： tab
15         上： up
16         下： down
17         左： left
18         右： right
19         其他按键名通过event.key查看
20     2.Vue 未提供别名的按键，可以使用按键原始值的key值去绑定，但要注意别名（event.key）为多个单词的时候需要用转换（如：KebabCase 转换为 kebab-case）
21     3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（wind键）
22         .配合keyup使用：按下修饰键同时，再按下其他键，随后释放其他键，事件才触发
23         .配合keydown使用：正常触发事件
24     4.也可以使用keyCode去指定具体的按键（不推荐）
25     5.Vue.config.keyCodes.自定义键名 = 键码。可以去指定按键别名。
26          -->
27         <div id="root">
28             <h1>hello， {{name}}</h1>
29             <!-- @keyup.13 也可以使用keyCode去指定具体的按键（不推荐） -->
30             <input type="text" placeholder="按下ctrl+y提示输入" @keyup.ctrl.y="showInfo" >
31         </div>
32     </body>
33 
34     <script type="text/javascript" >
35         Vue.config.productionTip = false;//     阻止 vue 在启动时生成生产提示。
36         // Vue.config.keyCodes.huiche = 13; // 自定义键名也不推荐
37         let vm = new Vue({
38             el: '#root',
39             data: {
40                 name: 'Jack'
41             },
42             methods: {
43                 showInfo(event){
44                     console.log(event.key, event.keyCode); // key是按键名，keyCode是按键码
45                     // if (event.keyCode !== 13){ // 在Vue中你不用亲自去判断这个，keyup，keydown有专门的修饰符
46                     //     return;
47                     // }
48                     // console.log(event.target.value);
49                 },
50             }
51         })
52         vm.$mount('#root') // el的第二种写法
53     </script>
54 </html>

 

posted @ 2022-05-20 14:20  看一百次夜空里的深蓝  阅读(331)  评论(0)    收藏  举报