在Vue進(jìn)行前端開發(fā)中，事件監(jiān)聽(tīng)是必不可少的功能，本文通過(guò)簡(jiǎn)單的小例子，簡(jiǎn)述v-on的簡(jiǎn)單用法，僅供學(xué)習(xí)分享使用，如有不足之處，還請(qǐng)指正。

監(jiān)聽(tīng)事件

可以用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。如下所示：

<button v-on:click='counter += 1'>Add 1</button> <p>按鈕被點(diǎn)擊了 {{ counter }} 次.</p>

其中counter為Vue自定義的一個(gè)屬性值。

事件處理方法

事實(shí)上，許多事件處理邏輯會(huì)更為復(fù)雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個(gè)需要調(diào)用的方法名稱。如下所示：

<button v-on:click='greet'>Greet</button>

greet 是在下面定義的方法名。如下所示：

<script type='text/javascript'> var app=new Vue({ el:’#app’, data:{ msg:’hello world!!!’, counter:0, name: ’Vue.js’ }, // 在 `methods` 對(duì)象中定義方法 methods:{ greet: function (event) { // `this` 在方法里指向當(dāng)前 Vue 實(shí)例 alert(’Hello ’ + this.name + ’!’) // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } }, } });</script>

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

除了直接綁定到一個(gè)方法，也可以在內(nèi)聯(lián) JavaScript 語(yǔ)句中調(diào)用方法，如下所示：

<button v-on:click='say(’hi’)'>Say hi</button> <button v-on:click='say(’what’)'>Say what</button>

有時(shí)也需要在內(nèi)聯(lián)語(yǔ)句處理器中訪問(wèn)原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法：

<button v-on:click='warn(’表單不能被提交.’, $event)'>提交</button>

其中say，warn均為自定義方法，如下所示：

say: function (message) { alert(message);},warn: function (message, event) { // 現(xiàn)在我們可以訪問(wèn)原生事件對(duì)象 if (event) { event.preventDefault(); } alert(message);}

事件修飾符

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。為了解決這個(gè)問(wèn)題，Vue.js 為 v-on 提供了事件修飾符。之前提過(guò)，修飾符是由點(diǎn)開頭的指令后綴來(lái)表示的。事件修飾符共以下幾種：

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

<!-- 阻止單擊事件繼續(xù)傳播 --><a v-on:click.stop='doThis'>點(diǎn)擊666</a><!-- 提交事件不再重載頁(yè)面 --><form v-on:submit.prevent='onSubmit'> <div>阻止提交</div></form><!-- 修飾符可以串聯(lián) --><a v-on:click.stop.prevent='doThat'></a><!-- 只有修飾符 --><form v-on:submit.prevent> <div id='d'>只有修飾符</div></form><!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 --><!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 --><div v-on:click.capture='doThis'>doThis...</div><!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) --><!-- 即事件不是從內(nèi)部元素觸發(fā)的 --><div v-on:click.self='doThat'>doThat...</div>

使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

新增屬性

不像其它只能對(duì)原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。

<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 --><a v-on:click.once='doThis'>點(diǎn)我一次666</a>

Vue 還對(duì)應(yīng) addEventListener 中的 passive 選項(xiàng)提供了 .passive 修飾符。

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

這個(gè) .passive 修飾符尤其能夠提升移動(dòng)端的性能。不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。

按鍵修飾符

在監(jiān)聽(tīng)鍵盤事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤事件時(shí)添加按鍵修飾符：

<!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` ,點(diǎn)擊時(shí)不調(diào)用 --> <input v-on:keyup.enter='submit' type='text' value='點(diǎn)我777' /> <!-- 可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來(lái)作為修飾符。--> <input v-on:keyup.page-down='onPageDown' type='text' value='點(diǎn)我888' /> <!-- 在上述示例中，處理函數(shù)只會(huì)在 $event.key 等于 PageDown 時(shí)被調(diào)用。且光標(biāo)在時(shí)才管用。 -->

系統(tǒng)修飾符

可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽(tīng)器。

.ctrl .alt .shift .meta

注意：在 Mac 系統(tǒng)鍵盤上，meta 對(duì)應(yīng) command 鍵 (⌘)。在 Windows 系統(tǒng)鍵盤 meta 對(duì)應(yīng) Windows 徽標(biāo)鍵 (⊞)。在 Sun 操作系統(tǒng)鍵盤上，meta 對(duì)應(yīng)實(shí)心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機(jī)器的鍵盤、以及其后繼產(chǎn)品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標(biāo)記為“META”。在 Symbolics 鍵盤上，meta 被標(biāo)記為“META”或者“Meta”。

<!-- Alt + C --> <input @keyup.alt.67='clear'> <!-- Ctrl + Click --> <div @click.ctrl='doSomething'>Do something</div>

請(qǐng)注意：修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時(shí)，事件觸發(fā)時(shí)修飾鍵必須處于按下?tīng)顟B(tài)。換句話說(shuō)，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會(huì)觸發(fā)事件。如果你想要這樣的行為，請(qǐng)為 ctrl 換用 keyCode：keyup.17。

.exact 修飾符

.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。

<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) --> <button @click.ctrl='onClick'>A</button> <!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) --> <button @click.ctrl.exact='onCtrlClick'>A</button> <!-- 沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) --> <button @click.exact='onClick'>A</button>

鼠標(biāo)按鈕修飾符

這些修飾符會(huì)限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕，如下所示：

.left .right .middle

為什么在 HTML 中監(jiān)聽(tīng)事件?

你可能注意到這種事件監(jiān)聽(tīng)的方式違背了關(guān)注點(diǎn)分離 (separation of concern) 這個(gè)長(zhǎng)期以來(lái)的優(yōu)良傳統(tǒng)。但不必?fù)?dān)心，因?yàn)樗械?Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會(huì)導(dǎo)致任何維護(hù)上的困難。實(shí)際上，使用 v-on 有幾個(gè)好處：

掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法。 因?yàn)槟銦o(wú)須在 JavaScript 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測(cè)試。 當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。你無(wú)須擔(dān)心如何清理它們。

本例中全部代碼如下所示：

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>事件處理</title> <!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <div id='app'> <h2>監(jiān)聽(tīng)事件</h2> <!-- 可以用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。 --> <button v-on:click='counter += 1'>Add 1</button> <p>按鈕被點(diǎn)擊了 {{ counter }} 次.</p> <h2>事件處理方法</h2> <!-- 然而許多事件處理邏輯會(huì)更為復(fù)雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。 因此 v-on 還可以接收一個(gè)需要調(diào)用的方法名稱。 --> <!-- `greet` 是在下面定義的方法名 --> <button v-on:click='greet'>Greet</button> <!-- // 也可以用 JavaScript 直接調(diào)用方法 //app.greet() // => ’Hello Vue.js!’ --> <h2>內(nèi)聯(lián)處理器中的方法</h2> <!-- 除了直接綁定到一個(gè)方法，也可以在內(nèi)聯(lián) JavaScript 語(yǔ)句中調(diào)用方法： --> <button v-on:click='say(’hi’)'>Say hi</button> <button v-on:click='say(’what’)'>Say what</button> <!-- 有時(shí)也需要在內(nèi)聯(lián)語(yǔ)句處理器中訪問(wèn)原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法： --> <br> <button v-on:click='warn(’表單不能被提交.’, $event)'>提交</button> <h2>事件修飾符</h2> <!-- 在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求。 盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。 為了解決這個(gè)問(wèn)題，Vue.js 為 v-on 提供了事件修飾符。之前提過(guò)，修飾符是由點(diǎn)開頭的指令后綴來(lái)表示的。 .stop •.prevent •.capture •.self •.once •.passive --> <!-- 阻止單擊事件繼續(xù)傳播 --> <a v-on:click.stop='doThis'>點(diǎn)擊666</a> <br> <!-- 提交事件不再重載頁(yè)面 --> <form v-on:submit.prevent='onSubmit'><div> 阻止提交</div> </form> <br> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent='doThat'></a> <br> <!-- 只有修飾符 --> <form v-on:submit.prevent><div id='d'> 只有修飾符</div> </form> <br> <!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 --> <!-- 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 --> <div v-on:click.capture='doThis'>doThis...</div> <br> <!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 --> <div v-on:click.self='doThat'>doThat...</div> <!-- 使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。 因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。 --> <h2>新增</h2> <!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 --> <a v-on:click.once='doThis'>點(diǎn)我一次666</a> <!-- 不像其它只能對(duì)原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。 --> <!-- Vue 還對(duì)應(yīng) addEventListener 中的 passive 選項(xiàng)提供了 .passive 修飾符。 --> <!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) --> <!-- 而不會(huì)等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive='onScroll'>...</div> <!-- 這個(gè) .passive 修飾符尤其能夠提升移動(dòng)端的性能。 !不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。 請(qǐng)記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。 --> <h2>按鍵修飾符</h2> <!-- 在監(jiān)聽(tīng)鍵盤事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤事件時(shí)添加按鍵修飾符： --> <!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` ,點(diǎn)擊時(shí)不調(diào)用 --> <input v-on:keyup.enter='submit' type='text' value='點(diǎn)我777' /> <!-- 可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來(lái)作為修飾符。 --> <input v-on:keyup.page-down='onPageDown' type='text' value='點(diǎn)我888' /> <!-- 在上述示例中，處理函數(shù)只會(huì)在 $event.key 等于 PageDown 時(shí)被調(diào)用。且光標(biāo)在時(shí)才管用。 --> <h2>#按鍵碼</h2> <!-- keyCode 的事件用法已經(jīng)被廢棄了并可能不會(huì)被最新的瀏覽器支持。 使用 keyCode attribute 也是允許的： --> <input v-on:keyup.13='submit' type='button' value='key up 13'> <!-- 為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數(shù)常用的按鍵碼的別名： .enter •.tab •.delete (捕獲“刪除”和“退格”鍵) •.esc •.space •.up •.down •.left •.right !有一些按鍵 (.esc 以及所有的方向鍵) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，這些內(nèi)置的別名應(yīng)該是首選。 你還可以通過(guò)全局 config.keyCodes 對(duì)象自定義按鍵修飾符別名： // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 --> <h2>系統(tǒng)修飾鍵</h2> <!-- 可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽(tīng)器。 .ctrl •.alt •.shift •.meta 注意：在 Mac 系統(tǒng)鍵盤上，meta 對(duì)應(yīng) command 鍵 (⌘)。 在 Windows 系統(tǒng)鍵盤 meta 對(duì)應(yīng) Windows 徽標(biāo)鍵 (⊞)。在 Sun 操作系統(tǒng)鍵盤上，meta 對(duì)應(yīng)實(shí)心寶石鍵 (◆)。 在其他特定鍵盤上，尤其在 MIT 和 Lisp 機(jī)器的鍵盤、以及其后繼產(chǎn)品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標(biāo)記為“META”。 在 Symbolics 鍵盤上，meta 被標(biāo)記為“META”或者“Meta”。 --> <!-- Alt + C --> <input @keyup.alt.67='clear'> <!-- Ctrl + Click --> <div @click.ctrl='doSomething'>Do something</div> <!-- !請(qǐng)注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時(shí)，事件觸發(fā)時(shí)修飾鍵必須處于按下?tīng)顟B(tài)。 換句話說(shuō)，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發(fā) keyup.ctrl。而單單釋放 ctrl 也不會(huì)觸發(fā)事件。 如果你想要這樣的行為，請(qǐng)為 ctrl 換用 keyCode：keyup.17。 --> <h2>#.exact 修飾符</h2> <!-- .exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。 --> <!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) --> <button @click.ctrl='onClick'>A</button> <!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) --> <button @click.ctrl.exact='onCtrlClick'>A</button> <!-- 沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) --> <button @click.exact='onClick'>A</button> <h2>#鼠標(biāo)按鈕修飾符</h2> <!-- .left •.right •.middle 這些修飾符會(huì)限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。 --> <h2>為什么在 HTML 中監(jiān)聽(tīng)事件?</h2> <!-- 你可能注意到這種事件監(jiān)聽(tīng)的方式違背了關(guān)注點(diǎn)分離 (separation of concern) 這個(gè)長(zhǎng)期以來(lái)的優(yōu)良傳統(tǒng)。 但不必?fù)?dān)心，因?yàn)樗械?Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會(huì)導(dǎo)致任何維護(hù)上的困難。 實(shí)際上，使用 v-on 有幾個(gè)好處： 1.掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對(duì)應(yīng)的方法。 2.因?yàn)槟銦o(wú)須在 JavaScript 里手動(dòng)綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測(cè)試。 3.當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。你無(wú)須擔(dān)心如何清理它們。 --> </div> <script type='text/javascript'> var app=new Vue({el:’#app’,data:{ msg:’hello world!!!’, counter:0, name: ’Vue.js’},// 在 `methods` 對(duì)象中定義方法methods:{ greet: function (event) { // `this` 在方法里指向當(dāng)前 Vue 實(shí)例 alert(’Hello ’ + this.name + ’!’) // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } }, say: function (message) { alert(message); }, warn: function (message, event) { // 現(xiàn)在我們可以訪問(wèn)原生事件對(duì)象 if (event) { event.preventDefault(); } alert(message); }, doThis:function(){ alert(’點(diǎn)我666’); }, doThat:function(){ alert(’點(diǎn)它666’); }, submit:function(){ alert(’點(diǎn)我--submit’); }, onPageDown:function(){ alert(’點(diǎn)我--onPageDown’); }, doSomething:function(){ alert(’點(diǎn)我--doSomething’); }, clear:function(){ alert(’點(diǎn)我--clear’); }, onClick:function(){ alert(’點(diǎn)我--onClick’); }, onCtrlClick:function(){ alert(’點(diǎn)我--onCtrlClick’); }} }); </script> </body></html>

以上就是詳解Vue之事件處理的詳細(xì)內(nèi)容，更多關(guān)于Vue之事件處理的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！