Vue學習之旅Part4：Vue的按鍵修飾符和自定義按鍵修飾符

v-on除了有事件修飾符以外 還有按鍵修飾符
Vue內部提供了一些按鍵修飾符
按鍵修飾符即代替了鍵盤觸發的事件

舉個栗子：@keyup.enter="add"
表明了只有回車鍵進入keyup事件纔會觸發add方法

Vue自帶的按鍵修飾符：

Vue自帶的按鍵修飾符 直接使用便可

• .enter (回車鍵)
• .tab (跳格鍵)
• .delete (刪除和退格鍵)
• .esc (退出鍵)
• .space (空格鍵)
• .up (方向鍵 - 上)
• .down (方向鍵 - 下)
• .left (方向鍵 - 左)
• .right (方向鍵 - 右)

自定義按鍵修飾符

一、直接綁定

鍵盤上的每一個鍵都有一個對應的鍵盤碼值
可直接用碼值來綁定
例如：

<input type="text" @keyup.113="add">

這樣綁定時是比較方便 但也有其弊端：鍵盤碼是一串數字 很差記

二、還可進行配置：

1.x版本語法：Vue.directive("on").keyCodes.自定義的鍵盤碼=碼值

2.x版本語法：Vue.config.keyCodes.自定義的鍵盤碼=碼值

例：

<script> // 自定義全局的按鍵修飾符 Vue.config.keyCodes.f2=113; </script>

這樣 便可使用自定義的按鍵修飾符了：

<input type="text" @keyup.f2="add">