vue的監聽鍵盤事件的快捷方法

在咱們的項目常常須要監聽一些鍵盤事件來觸發程序的執行，而Vue中容許在監聽的時候添加關鍵修飾符：

<input v-on:keyup.13="submit">

對於一些經常使用鍵，還提供了按鍵別名：

<input @keyup.enter="submit">      <!-- 縮寫形式 -->

所有的按鍵別名：

•  .enter
•  .tab
•  .delete (捕獲「刪除」和「退格」鍵)
•  .esc
•  .space
•  .up
•  .down
•  .left
•  .right

修飾鍵：

•  .ctrl
•  .alt
•  .shift
•  .meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

與按鍵別名不一樣的是，修飾鍵和 keyup 事件一塊兒用時，事件引起時必須按下正常的按鍵。換一種說法：若是要引起 keyup.ctrl，必須按下 ctrl 時釋放其餘的按鍵；單單釋放 ctrl 不會引起事件。

<!-- 按下Alt + 釋放C觸發 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 釋聽任意鍵觸發 -->
<input @keyup.alt="other">

<!-- 按下Ctrl + enter時觸發 -->
<input @keydown.ctrl.13="submit">

 對於elementUI的input，咱們須要在後面加上.native, 由於elementUI對input進行了封裝，原生的事件不起做用。

<input v-model="form.name" placeholder="暱稱" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="暱稱" @keyup.enter.native="submit"></el-input>