2019獨角獸企業重金招聘Python工程師標準>>>

事件處理

監聽事件

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

直接把處理復雜邏輯的JavaScript代碼寫在v-on指令中是不可行的，因此v-on可以接收一個需要調用的方法名稱。

內聯處理器中的方法

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

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

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit </button>

事件修飾符

在事件處理程序中調用event.preventDefault() 或 event.stopPropagation()是非常常見的需求。盡管在方法中可以輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理DOM事件細節。

Vue為 v-on 提供了事件修飾符。

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

<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --> <form v-on:submit.prevent></form><!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處理，然后才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div><!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div>

【注意】

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。

因此，用v-on:click.prevent.self會阻止所有的點擊，而v-on:click.self.prevent只會阻止對元素自身的點擊。

2.1.4版本新增：不像其它只能對原生的DOM事件起作用的修飾符，.once修飾符還能被用到自定義的組件事件上。

2.3.0版本新增：Vue還對應addEventListener中的passive選項提供了.passive修飾符。

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

這個?.passive?修飾符尤其能夠提升移動端的性能。

【注意】

不要把?.passive?和?.prevent?一起使用，因為?.prevent?將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive?會告訴瀏覽器你不想阻止事件的默認行為。

按鍵修飾符

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

<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"><!-- 縮寫語法 --> <input @keyup.enter="submit">

全部的按鍵別名：

.enter、.tab、.delete（捕獲刪除 和 退格鍵）、.esc、.space、.up、.down、.left、.right

可以通過全局 config.keyCode 對象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112

# 自動匹配按鍵修飾符

2.5.0版本新增：可以直接將KeyboardEvent.key暴露的任意有效按鍵名轉換為kebab-case來作為修飾符：

<input @keyup.page-down="onPageDown">

在上面的例子中，處理函數僅在?$event.key === 'PageDown'?時被調用。

【注意】

有一些按鍵 (.esc?以及所有的方向鍵) 在 IE9 中有不同的?key?值, 如果你想支持 IE9，它們的內置別名應該是首選。

系統修飾鍵

2.1.0版本新增：可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。

.ctrl、.alt、.shift、.meta

【注意】

在 Mac 系統鍵盤上，meta 對應 command 鍵 (?)。在 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>

【注意】

請注意修飾鍵與常規按鍵不同，在和?keyup?事件一起用時，事件觸發時修飾鍵必須處于按下狀態。換句話說，只有在按住?ctrl?的情況下釋放其它按鍵，才能觸發?keyup.ctrl。而單單釋放?ctrl?也不會觸發事件。如果你想要這樣的行為，請為?ctrl?換用?keyCode：keyup.17。

# .exact修飾符

2.5.0版本新增：.exact?修飾符允許你控制由精確的系統修飾符組合觸發的事件。

<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --> <button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的時候才觸發 --> <button @click.ctrl.exact="onCtrlClick">A</button><!-- 沒有任何系統修飾符被按下的時候才觸發 --> <button @click.exact="onClick">A</button>

# 鼠標按鈕修飾符

2.2.0版本新增

.left、.right、.middle

這些修飾符會限制處理函數僅響應特定的鼠標按鈕。

為什么在HTML中監聽事件？

雖然這種事件監聽的方式違背了 關注點分離 這個優良傳統。但所有的Vue.js事件處理方法和表達式都嚴格綁定在當前視圖的ViewModel上。而且，使用 v-on 有幾個好處：

（1）掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。

（2）因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。

（3）當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們。

?

轉載于:https://my.oschina.net/happyran/blog/1982473

總結

以上是生活随笔為你收集整理的Vue.js学习笔记四的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。