監(jiān)聽事件
可以使用 v-on 指令監(jiān)聽DOM事件溯泣，并在觸發(fā)的時候運行一些js代碼鹏往。
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
事件處理方法
以上是把js代碼直接寫在 v-on中了蓖租，但是實際中纪挎，js的 邏輯代碼會比較復雜，所以一般在 v-on中直接接收方法名梳星。
<div id="example-2">
<!-- `greet` 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// `this` 在方法里指向當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接調用方法
example2.greet() // => 'Hello Vue.js!'
內聯處理器中的方法
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})
我們有時候需要在內聯的js語句中訪問原生的dom事件赞赖，可以用特殊變量$event傳入方法。
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
事件修飾符
在事件處理程序中冤灾，event.preventDefault()和event.stopPropagation()是非常常見的需求前域。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯韵吨，而不是去處理 DOM 事件細節(jié)匿垄。
1.event.stopPropagation()方法
這是阻止事件的冒泡方法，不讓事件向documen上蔓延归粉，但是默認事件任然會執(zhí)行椿疗，當你掉用這個方法的時候，如果點擊一個連接糠悼，這個連接仍然會被打開届榄，
2.event.preventDefault()方法
這是阻止默認事件的方法，調用此方法是倔喂，連接不會被打開铝条，但是會發(fā)生冒泡靖苇，冒泡會傳遞到上一層的父元素；
3.return false 班缰；
這個方法比較暴力贤壁，他會同事阻止事件冒泡也會阻止默認事件；寫上此代碼埠忘，連接不會被打開脾拆，事件也不會傳遞到上一層的父元素；可以理解為return false就等于同時調用了event.stopPropagation()和event.preventDefault()
vue中提供了事件修飾符來解決這些問題莹妒。事件修飾符是由 . 開始指令后綴來描述的名船。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯，就是可以同時使用多個修飾符 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理动羽，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數 -->
<!-- 即事件不是從內部元素觸發(fā)的 -->
也就是說點擊 div中的內容是無效的包帚，只有點擊當前div才觸發(fā)
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>
不像其它只能對原生的 DOM 事件起作用的修飾符渔期，`.once` 修飾符還能被用到自定義的[組件事件](https://cn.vuejs.org/v2/guide/components-custom-events.html)上运吓。
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
這個 .passive 修飾符尤其能夠提升移動端的性能。
使用修飾符時疯趟，順序很重要拘哨；相應的代碼會以同樣的順序產生。因此信峻，用 v-on:click.prevent.self 會阻止所有的點擊倦青，而 v-on:click.self.prevent只會阻止對元素自身的點擊。
不要把 .passive 和 .prevent 一起使用盹舞，因為 .prevent 將會被忽略产镐，同時瀏覽器可能會向你展示一個警告。請記住踢步，.passive 會告訴瀏覽器你不想阻止事件的默認行為癣亚。
按鍵修飾符
在監(jiān)聽鍵盤事件時，我們經常需要檢查常見的按鍵值获印，Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<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
系統(tǒng)修飾鍵
可以用如下修飾符來實現僅在按下相應按鍵時才觸發(fā)鼠標或鍵盤事件的監(jiān)聽器玻孟。
.ctrl
.alt
.shift
.meta
注意：在 Mac 系統(tǒng)鍵盤上，meta 對應 command 鍵 (?)鳍征。在 Windows 系統(tǒng)鍵盤 meta 對應 Windows 徽標鍵 (?)黍翎。在 Sun 操作系統(tǒng)鍵盤上，meta 對應實心寶石鍵 (◆)艳丛。在其他特定鍵盤上玩敏，尤其在 MIT 和 Lisp 機器的鍵盤斗忌、以及其后繼產品，比如 Knight 鍵盤旺聚、space-cadet 鍵盤织阳，meta 被標記為“META”。在 Symbolics 鍵盤上砰粹，meta 被標記為“META”或者“Meta”唧躲。
組合鍵demo
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
請注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時碱璃，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)弄痹。換句話說，只有在按住 ctrl 的情況下釋放其它按鍵嵌器，才能觸發(fā) keyup.ctrl肛真。而單單釋放 ctrl 也不會觸發(fā)事件。如果你想要這樣的行為爽航，請為 ctrl 換用 keyCode：keyup.17蚓让。
同時這種事件只能在表單上運作。
鼠標按鈕修飾符
.left
.right
.middle
<p @click.right="handleClick()">test</p>
這些修飾符會限制處理函數僅響應特定的鼠標按鈕讥珍。
為什么在HTML中監(jiān)聽事件
你可能注意到這種事件監(jiān)聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優(yōu)良傳統(tǒng)历极。但不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上衷佃，它不會導致任何維護上的困難趟卸。
1.掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。
2.因為你無須在 JavaScript 里手動綁定事件氏义，你的 ViewModel 代碼可以是非常純粹的邏輯锄列，和 DOM 完全解耦，更易于測試惯悠。
3.當一個 ViewModel 被銷毀時邻邮，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們吮螺。
