Vue--按键修饰符（逐个学习按键修饰符）

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

1 <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
2 <input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

1 <!-- 同上 -->
2 <input v-on:keyup.enter="submit">
3 
4 <!-- 缩写语法 -->
5 <input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space(空格键)
.up
.down
.left
.right

我们也可以自定义按键

 1 <html>
 2   <head>
 3     <title>Vue按键修饰符</title>
 4     <script src="vue.js"></script>
 5     <style type="text/css">
 6     </style>
 7   </head>
 8   <body>
 9    <div id="example">
10       <ul>
11         <li v-for="item in items">
12           {{ item.name }}
13         </li>
14       </ul>
15       <button @keyup.f1="del()">删除</button>
16    </div>
17    <script>
18      Vue.config.keyCodes.f1 = 112;
19      new Vue({
20        el:"#example",
21        data:{
22          items:[
23            {name:"Hello"},
24            {name:"world"},
25            {name:"喜欢"},
26            {name:"happy"}
27          ]
28        },
29        methods:{
30          del(){
31             this.items.pop();
32          }
33        }
34      })
35    </script>

甚至可以这样添加多个

1 Vue.config.keyCodes = ｛
2     f1:112,
     // 可以添加多个
3    ............
4    ............
5    ............
6 
7 
8 ｝