事件處理
事件處理是指對系統(tǒng)中任意發(fā)生的一個活動調用有關程序或例程進行處理。主要目的是使系統(tǒng)正常運行。
目錄
監(jiān)聽事件
可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。
示例：
<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
}
})結果：
事件處理方法
然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 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!'結果：
內(nèi)聯(lián)處理器中的方法
除了直接綁定到一個方法，也可以在內(nèi)聯(lián) JavaScript 語句中調用方法：
<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)
}
}
})結果：
有時也需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>// ...
methods: {
warn: function (message, event) {
// 現(xiàn)在我們可以訪問原生事件對象
if (event) event.preventDefault()
alert(message)
}
}事件修飾符
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細節(jié)。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
.stop.prevent.capture.self.once.passive
<!-- 阻止單擊事件繼續(xù)傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監(jiān)聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 --> <div v-on:click.self="doThat">...</div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產(chǎn)生。因此，用
v-on:click.prevent.self會阻止所有的點擊，而v-on:click.self.prevent只會阻止對元素自身的點擊。
2.1.4 新增
<!-- 點擊事件將只會觸發(fā)一次 --> <a v-on:click.once="doThis"></a>
不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。如果你還沒有閱讀關于組件的文檔，現(xiàn)在大可不必擔心。
2.3.0 新增
Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div>
這個 .passive 修飾符尤其能夠提升移動端的性能。
不要把
.passive和.prevent一起使用，因為.prevent將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive會告訴瀏覽器你不想阻止事件的默認行為。
按鍵修飾符
在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查詳細的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` --> <input v-on:keyup.enter="submit">
你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符。
<input v-on:keyup.page-down="onPageDown">
在上述示例中，處理函數(shù)只會在 $event.key 等于 PageDown 時被調用。
按鍵碼
keyCode的事件用法已經(jīng)被廢棄了并可能不會被最新的瀏覽器支持。
使用 keyCode 特性也是允許的：
<input v-on:keyup.13="submit">
為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：
.enter.tab.delete(捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right
有一些按鍵 (
.esc以及所有的方向鍵) 在 IE9 中有不同的key值, 如果你想支持 IE9，這些內(nèi)置的別名應該是首選。
你還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112
系統(tǒng)修飾鍵
2.1.0 新增
可以用如下修飾符來實現(xiàn)僅在按下相應按鍵時才觸發(fā)鼠標或鍵盤事件的監(jiān)聽器。
.ctrl.alt.shift.meta
注意：在 Mac 系統(tǒng)鍵盤上，meta 對應 command 鍵 (?)。在 Windows 系統(tǒng)鍵盤 meta 對應 Windows 徽標鍵 (?)。在 Sun 操作系統(tǒng)鍵盤上，meta 對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其后繼產(chǎn)品，比如 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>
請注意修飾鍵與常規(guī)按鍵不同，在和
keyup事件一起用時，事件觸發(fā)時修飾鍵必須處于按下狀態(tài)。換句話說，只有在按住ctrl的情況下釋放其它按鍵，才能觸發(fā)keyup.ctrl。而單單釋放ctrl也不會觸發(fā)事件。如果你想要這樣的行為，請為ctrl換用keyCode：keyup.17。
.exact 修飾符
2.5.0 新增
.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發(fā) --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的時候才觸發(fā) --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 沒有任何系統(tǒng)修飾符被按下的時候才觸發(fā) --> <button @click.exact="onClick">A</button>
2.2.0 新增
.left.right.middle
這些修飾符會限制處理函數(shù)僅響應特定的鼠標按鈕。
為什么在 HTML 中監(jiān)聽事件?
你可能注意到這種事件監(jiān)聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優(yōu)良傳統(tǒng)。但不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：
1. 掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。
2. 因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。
3. 當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們。