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

事件處理

監(jiān)聽事件

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

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

內(nèi)聯(lián)處理器中的方法

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

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

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

事件修飾符

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

Vue為 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版本新增：不像其它只能對原生的DOM事件起作用的修飾符，.once修飾符還能被用到自定義的組件事件上。

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

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

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

【注意】

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

按鍵修飾符

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

<!-- 只有在 `keyCode` 是 13 時調(diào)用 `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暴露的任意有效按鍵名轉(zhuǎn)換為kebab-case來作為修飾符：

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

在上面的例子中，處理函數(shù)僅在?$event.key === 'PageDown'?時被調(diào)用。

【注意】

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

系統(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)聽的方式違背了 關注點分離 這個優(yōu)良傳統(tǒng)。但所有的Vue.js事件處理方法和表達式都嚴格綁定在當前視圖的ViewModel上。而且，使用 v-on 有幾個好處：

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

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

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

?

轉(zhuǎn)載于:https://my.oschina.net/happyran/blog/1982473

總結

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。