vue-事件修飾符和按鍵修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在 methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
爲了解決這個問題， Vue.js 爲 v-on 提供了 事件修飾符。經過由點(.)表示的指令後綴來調用修飾符。

.prevent
.capture
.self
.once

<div @click='doThis' style="width:100px;height: 100px; background: red;">
    點擊父元素
  <a v-on:click.stop="doThis">點擊子元素
  </a>
 </div>
/*當點擊父元素的時候，執行doThis,當點擊子元素a的時候，這個點擊動做不僅僅觸發了a標籤，同時也觸發了div標籤，這就是事件冒泡，因此假設上述例子中a標籤爲v-on:click='doThis',則doThis會被執行兩次，父元素和子元素都執行了一次click事件，而.stop則是阻止事件冒泡，再次點擊a標籤，click事件只會執行一次*/

按鍵修飾符

在監聽鍵盤事件時，咱們常常須要監測常見的鍵值。 Vue 容許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<input v-on:keyup.13="submit">
記住全部的 keyCode 比較困難，因此 Vue 爲最經常使用的按鍵提供了別名：

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

所有的按鍵別名：

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

能夠經過全局 config.keyCodes 對象自定義按鍵修飾符別名：
// 可使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
按鍵修飾符

2.1.0 新增
能夠用以下修飾符開啓鼠標或鍵盤事件監聽，使在按鍵按下時發生響應。

.ctrl
.alt
.shift
.meta

注意：在Mac系統鍵盤上，meta對應命令鍵 (⌘)。在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>