Vue學習之路第十九篇：按鍵修飾符的使用
阿新 • • 發佈：2019-02-15
定義 this 速度 捕獲 需求 序號 esc style color
1、我們工作中經常會有類似於這樣的需求：按下Enter鍵觸發某個事件、或者按下ESC退出頁面等各種各樣的場景。在Vue中，可以通過鍵盤修飾符來實現這樣的場景。
2、事例代碼：
<body>
<divi id="app">
序號：<input type="text" v-model="idValue"/>
車名：<input type="text" v-model="nameValue" @keyup.enter="add()"/>
<p v-for="item in list">
序號：{{item.id }} , 車名：{{ item.name }} 這裏在車名的input框裏添加keyup事件，即鍵盤按下擡起時觸發；後面的“enter”即為按鍵修飾符，定義哪個按鍵會觸發該事件。所以當光標位於該input框時，按下Enter鍵擡起就會觸發事件執行add方法，並添加新數據展示在頁面上。
3、除了enter鍵以外，vue還定義了以下按鍵修飾符：tab、delete (捕獲“刪除”和“退格”鍵)、esc、space、up、down、left、right；這些是官網提供的修飾符，但是實際進行操作的時候發現，幾乎所有的鍵盤按鍵都可以用來作為修飾符，大家有空可以自己嘗試一下，畢竟vue更新速度還是比較快的，真理還是要來自於實踐。
4、除了使用以上方法，我們還可以使用keycode（鍵盤碼）來作為修飾符使用。如：f2的鍵盤碼為113，我們可以修改代碼為：
車名：<input type="text" v-model="nameValue" @keyup.113="add()"/>
這時光標在input框時，我們按下再松開f2時也可以觸發事件。
註：不管是使用鍵盤名稱還是使用鍵盤碼都要防止快捷鍵的沖突，快捷鍵沖突的時候會不起作用。
5、當然按鍵事件除了keup還有kedown等其他按鍵事件，大家有空的話可以嘗試使用其他按鍵事件。
每天進步一點點！
Vue學習之路第十九篇：按鍵修飾符的使用