Vue事件處理

監聽事件

可使用v-on指令監聽DOM事件，並在觸發的時候運行一些JavaScript代碼。

<button v-on:click="counter+1"></button>

事件處理方法

由於事件處理邏輯會更爲複雜，因此直接把JavaScript代碼寫在v-on指令中是不可行的，所以v-on還能夠接受一個須要調用的方法名稱。

<button v-on:click="greet"></button>

var vm = new Vue({
    el: '#el',
    methods: {
        greet: function() {}
    }
})

內聯處理器中的方法

除了直接綁定到一個方法，也能夠在內聯JavaScript語句中調用方法：

<div>
    <button v-on:click="say('hi')"></button>
</div>

有時也須要在內聯語句處理器中訪問原始的DOM事件。能夠用特殊變量$event把它傳入方法：

<button v-on:click="warn('form connot be submit'， $event)"></button>

事件修飾符

在事件處理程序中調用event.preventDefault()或event.stopPropagation()是很是常見的需求，儘管咱們能夠在方法中輕鬆實現這點，可是更好的方式是：方法只有純粹的數據邏輯，不是去處理DOM事件細節。

爲了解決這個問題，Vue提供了v-on 事件修飾符。修飾符是由點開頭的指令後綴表示的。

.stop
.prevent
.capture
.self
.once
.passive

//阻止事件冒泡
<a v-on:click.stop="do">
//提交事件再也不重載頁面
<a v-on:click.prevent="do">
//修飾符能夠串聯
<a v-on:click.stop.prevent="do">
//只有修飾符
<a v-on:click:submit.prevent>
//只當在event.target是當前元素自身時觸發處理函數
// 即事件不是從內部元素觸發的
<div v-on:click.self="do">

使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self會阻止全部的點擊，而 v-on:click.self只會阻止對元素自身的點擊。

2.1.4新增

<a v-on:click.once="do">

.once修飾符不只可使用在原生的DOM事件中，還可使用在自定的組件事件中。

2.3.0新增

Vue還對應addEventListener中的passive選項提供了.passive修飾符。

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的狀況 -->
<div v-on:scroll.passive="onScroll">...</div>

不要把 .passive 和 .prevent 一塊兒使用，由於 .prevent 將會被忽略，同時瀏覽器可能會向你展現一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。

按鍵修飾符

Vue容許爲v-on在監聽鍵盤事件時添加按鍵修飾符：

//只有在keyCode是13的時候調用
<input v-on:keyup.13="submit">

記住全部的keyCode比較困難，因此Vue爲經常使用的按鍵提供別名：

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

所有按鍵別名

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

能夠經過全局config.keyCodes對象自定義按鍵修飾符別名

config.keyCodes.f1 = 12

系統修飾鍵

.ctrl
.alt
.shift
.meta

.exact修飾符

精確修飾符

鼠標按鈕修飾符

.left
.right
.middle