目錄

• 常用按鍵別名
• 未提供別名的鍵
• 系統修飾鍵
• 自定義按鍵別名

在中我們要獲取一個按鍵的編碼通常需要通過(keydown/keyup)去繫結一個事件，再通過預設引數event中的keyCode屬性去取得編碼。如果我們要實現按固pcIRnM定的鍵才能觸發事件時就需要在事件中進行不斷的判斷，這樣會顯的很麻煩，如

var input = document.querySelector('input')
    input.onkeyup = function (e) {
        if (e.keyCode == 13)
            console.log('我是回車鍵')
    }

在中就為我們一些常用的按鍵提供了別名，並且只需要我們在事件後加上相應別名即可，不需要我們手動的在事件中進行判斷。

常用按鍵別名

Vue中為一些常用的按鍵綁定了別名，分別有以下幾種。

• 上箭頭：up
• 下箭頭：down
• 左箭頭：left
• 右箭頭：right
• 空格：space
• 換行：tab
• 退出：esc
• 回車：enter
• 刪除/退格:delhttp://www.cppcns.comete

別名可用來限制鍵盤事件(keydown、keyup)，只有按下鍵的是與別名一致時才會去執行所繫結的事件

<input v-on:keyup.enter="showtip" type="text">
只有按下回車鍵時才會執行showtip方法

另外，tab鍵只適合與keydown一起使用，在瀏覽器中tab本身就已經綁定了事件：切換焦點，所以在按下放開tab鍵後就會觸動預設的事件，而忽視了keyup所繫結的事件。而使用keydown就能避過這一情況，在tab按下的那一瞬間便會執行所繫結的事件。

未提供別名的鍵

另外，在vue中未提供別名的按鍵，vue也為我們提供了一種方法去使用。vue中規定未提供別名的按鍵，可使用按鍵原始的key值去繫結，所謂key值就是由event.key獲得的值。如

var input = document.querySelector('input')
    input.onkeyup = function (e) {
       console.log(e.key)
       }

以上程式碼在我們按下任意一鍵時在控制檯就會輸出對應的key值，分別按下大小寫切換鍵、Q以及W鍵會得到以下值

我們就可以使用key值作為按鍵的別名，特別要注意的是如果key值是單個字母或單詞直接使用key值就可以了，但是如果由多個單片語成如大小寫切換鍵就為兩個單詞的結合，這個時候就要把key值進行改動，使用短橫線命名法則將CapsLock-->caps-lock就可以使用了

<input v-on:keyup.Q="showtip" type="text">
//只有按下q鍵時才會執行showtip方法
<input v-on:keyup.caps-lock="showtips" type="text">
//只有按下capslock鍵時才會執行showtips方法

系統修飾鍵

所謂系統修飾鍵就是ctrl、alt、shift等。這些鍵的使用比較來說有點複雜，主要分為以下兩種情況

1.當觸發事件為keyup時，按下修飾鍵的同時要按下其他鍵，再釋放其他鍵，事件才能被觸發。

<input v-on:keyup.Alt="showtips" type="text">
//按下alt鍵後再按任意一鍵，然後再釋放任意鍵後便會執行showtips方法
//以上的步驟太過麻煩我們可以這樣寫
<input v-on:keyup.Alt.y="showtips" type="text">
//當按alt y時就會觸發事件而不用先按alt再按y再放y

當觸發事件為keydown時，直接按下修飾鍵。

<input v-on:keydown.Alt="showtips" type="text">
//只pcIRnM有按下alt鍵時才會執行showtips方法

自定義按鍵別名

vue中為我們提供了自定義按鍵別名的方法，通過（Vue.config.keyCodes.自定義鍵名=鍵碼）的方式去定義

<input v-on:keywww.cppcns.comdown.en="showtips" type="text">
//只有按下回車鍵時才會執行showtips方法
Vue.config.keyCodes.en=13
//13是回車鍵的鍵碼，將他的別名定義為en