在很多時候，我們想要在鍵盤上按一個指定的鍵，實現，新增，刪除的目的，比如按一下回車鍵，就要實現新增數據的目的
這樣我們就需要監聽鍵盤事件。比如 keydown：按鍵按下，keyup：按鍵擡起，keypress：按鍵按下擡起
在Vue中允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 `keyCode` 是 13 時調用 `vm實例中的submit方法` 這個13對應的鍵其實就是Enter回車鍵-->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難，所以 Vue 爲最常用的按鍵提供了別名：
<!-- 同上：這個enter就是鍵盤碼13的別名 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
Vue默認爲我們提供瞭如下鍵盤碼的別名：
.enter（回車鍵）.tab（Tab鍵）.delete(捕獲“刪除”和“退格”鍵).esc（Esc按鍵）.space（空格鍵）.up（方向上鍵）.down（方向下鍵）.left（方向左鍵）.right（方向右鍵）
案例：
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--當空格鍵按下並已經擡起的時候，調用add方法-->
Esc鍵<input type="text" v-model="name" v-on:keyup.esc="add(name)" />
<!--esc是鍵盤碼27的別名，所有可以下面直接用鍵盤碼27 效果樣-->
Esc鍵<input type="text" v-model="name" v-on:keyup.27="add(name)" />
<!--當Del鍵按下的時候，調用Del方法-->
Del鍵<input type="text" v-model="name" v-on:keydown.delete="Del(name)" />
<!--當空格鍵按下並即將擡起的時候，調用add方法-->
<!--keypress對中文輸入法支持不好，可能無法響應中文輸入;無法響應系統功能鍵（如delete，backspace等等）-->
<!--經過測試：keypress無法綁定 Esc，方向鍵,Tab鍵，Del鍵-->
<!--keypres對space空格鍵支持，因爲空格鍵不屬於系統功能鍵-->
空格鍵<input type="text" v-model="name" v-on:keypress.space="add(name)" />
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: '',
},
methods: {
add: function (name) { alert(name) },
Del: function (name) { alert(name) }
},
filters: {
}
})
</script>
</body>
</html>
如果對Vue提供的鍵盤碼別名覺得不夠用，我們可以直接用按鍵事件來綁定鍵盤碼keyCode。但是鍵盤碼keyCode全是數字，很難記，也不直觀。所以我們還可以給鍵盤碼自定義的設定別名。
案例：例如，我爲113這個鍵盤碼起個別名，例如叫F2
<html>
<head>
<script src="~/Scripts/vue.js"></script>
</head>
<body>
<div id="app">
<!--當F2鍵按下並擡起後，觸發add事件方法-->
自定義按鍵F2<input type="text" v-model="name" v-on:keyup.F2="add(name)" />
</div>
<script>
//自定義全局鍵盤碼別名（自己定義全局按鍵修飾符）
Vue.config.keyCodes.F2 = 113;
var vm = new Vue({
el: "#app",
data: {
name: '',
},
methods: {
add: function (name) { alert(name) },
},
filters: {
}
})
</script>
</body>
</html>