常用的按鍵碼的別名
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
有一些按鍵 (.esc 以及所有的方向鍵) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，這些內置的別名應該是首選。
##自定義按鍵修飾符 - 你還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
系統修飾鍵
- .ctrl
- .alt
- .shift
- .meta
注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (⌘)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (⊞)。在 Sun 操作系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其后繼產品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標記為“META”。在 Symbolics 鍵盤上，meta 被標記為“META”或者“Meta”。
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
請注意修飾鍵與常規按鍵不同，在和 keyup 事件一起用時，事件觸發時修飾鍵必須處於按下狀態。換句話說，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發 keyup.ctrl。而單單釋放 ctrl 也不會觸發事件。如果你想要這樣的行為，請為 ctrl 換用 keyCode：keyup.17。
.exact修飾符
.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>
鼠標按鈕修飾符
- .left
- .right
- .middle
總結
- 通過代碼 @keyup.enter 之類的代碼可以完成對鍵盤事件的事件處理。
- 通過代碼 config.keyCodes自定義按鍵修飾符別名（注意自定義的是按鍵修飾符的別名而不是鍵碼，鍵碼是固定不變的例如enter對應13，f2對應113，但是可以對鍵碼添加名稱用於調用）
Vue.config.keyCodes.f2=113;
//對113鍵碼（對應f2按鍵）添加別名f2，這樣就可以直接調用f2而不是通過鍵碼才能調用
//@keyup.f2在不設置之前是無效的。
@keyup.f2="doSomething";
//在按下f2時觸發對應的事件處理函數
- 通過代碼 @keyup.alt.113 可以為鍵盤事件"同時按下'alt'+'f2'鍵"添加事件處理程序
- 通過代碼 @click.ctrl可以為事件"鼠標左鍵+ctrl"添加事件處理程序（此時如果ctrl和其它按鍵一同按下也會觸發，因此並不嚴謹）