文章詳情頁

詳解Vue之事件處理

瀏覽：73日期：2023-01-08 13:14:06

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

監(jiān)聽事件

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

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

其中counter為Vue自定義的一個屬性值。

事件處理方法

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

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

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

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

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

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

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

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

事件修飾符

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

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

<a v-on:click.stop='doThis'>點擊666</a><form v-on:submit.prevent='onSubmit'> <div>阻止提交</div></form><a v-on:click.stop.prevent='doThat'></a><form v-on:submit.prevent> <div id='d'>只有修飾符</div></form><div v-on:click.capture='doThis'>doThis...</div><div v-on:click.self='doThat'>doThat...</div>

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

新增屬性

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

<a v-on:click.once='doThis'>點我一次666</a>

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

<div v-on:scroll.passive='onScroll'>...</div>

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

按鍵修飾符

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

<input v-on:keyup.enter='submit' type='text' value='點我777' />  <input v-on:keyup.page-down='onPageDown' type='text' value='點我888' />

系統(tǒng)修飾符

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

.ctrl .alt .shift .meta

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

<input @keyup.alt.67='clear'>  <div @click.ctrl='doSomething'>Do something</div>

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

.exact 修飾符

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

<button @click.ctrl='onClick'>A</button>  <button @click.ctrl.exact='onCtrlClick'>A</button>  <button @click.exact='onClick'>A</button>

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

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

.left .right .middle

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

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

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

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

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>事件處理</title>  <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> </head> <body> <div id='app'> <h2>監(jiān)聽事件</h2>  <button v-on:click='counter += 1'>Add 1</button> <p>按鈕被點擊了 {{ counter }} 次.</p> <h2>事件處理方法</h2>   <button v-on:click='greet'>Greet</button>  <h2>內(nèi)聯(lián)處理器中的方法</h2>  <button v-on:click='say(’hi’)'>Say hi</button> <button v-on:click='say(’what’)'>Say what</button>  <br> <button v-on:click='warn(’表單不能被提交.’, $event)'>提交</button> <h2>事件修飾符</h2>   <a v-on:click.stop='doThis'>點擊666</a> <br>  <form v-on:submit.prevent='onSubmit'><div> 阻止提交</div> </form> <br>  <a v-on:click.stop.prevent='doThat'></a> <br>  <form v-on:submit.prevent><div id='d'> 只有修飾符</div> </form> <br>   <div v-on:click.capture='doThis'>doThis...</div> <br>   <div v-on:click.self='doThat'>doThat...</div>  <h2>新增</h2>  <a v-on:click.once='doThis'>點我一次666</a>      <div v-on:scroll.passive='onScroll'>...</div>  <h2>按鍵修飾符</h2>   <input v-on:keyup.enter='submit' type='text' value='點我777' />  <input v-on:keyup.page-down='onPageDown' type='text' value='點我888' />  <h2>#按鍵碼</h2>  <input v-on:keyup.13='submit' type='button' value='key up 13'>  <h2>系統(tǒng)修飾鍵</h2>   <input @keyup.alt.67='clear'>  <div @click.ctrl='doSomething'>Do something</div>  <h2>#.exact 修飾符</h2>   <button @click.ctrl='onClick'>A</button>  <button @click.ctrl.exact='onCtrlClick'>A</button>  <button @click.exact='onClick'>A</button> <h2>#鼠標(biāo)按鈕修飾符</h2>  <h2>為什么在 HTML 中監(jiān)聽事件?</h2>  </div> <script type='text/javascript'> var app=new Vue({el:’#app’,data:{ msg:’hello world!!!’, counter:0, name: ’Vue.js’},// 在 `methods` 對象中定義方法methods:{ greet: function (event) { // `this` 在方法里指向當(dāng)前 Vue 實例 alert(’Hello ’ + this.name + ’!’) // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } }, say: function (message) { alert(message); }, warn: function (message, event) { // 現(xiàn)在我們可以訪問原生事件對象 if (event) { event.preventDefault(); } alert(message); }, doThis:function(){ alert(’點我666’); }, doThat:function(){ alert(’點它666’); }, submit:function(){ alert(’點我--submit’); }, onPageDown:function(){ alert(’點我--onPageDown’); }, doSomething:function(){ alert(’點我--doSomething’); }, clear:function(){ alert(’點我--clear’); }, onClick:function(){ alert(’點我--onClick’); }, onCtrlClick:function(){ alert(’點我--onCtrlClick’); }} }); </script> </body></html>

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

Vue

上一條：Vue watch響應(yīng)數(shù)據(jù)實現(xiàn)方法解析下一條：Vue路由切換頁面不更新問題解決方案

相關(guān)文章：

1. ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))2. PHP循環(huán)與分支知識點梳理3. 解析原生JS getComputedStyle4. 無線標(biāo)記語言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁5. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)6. ASP實現(xiàn)加法驗證碼7. 讀大數(shù)據(jù)量的XML文件的讀取問題8. css代碼優(yōu)化的12個技巧9. 利用CSS3新特性創(chuàng)建透明邊框三角10. 前端從瀏覽器的渲染到性能優(yōu)化

排行榜

					
					django從后臺返回html代碼的實例
基于SpringBoot bootstrap.yml配置未生效的解決
Docker容器如何更新打包并上傳到阿里云
Docker容器網(wǎng)絡(luò)端口配置過程詳解
IntelliJ IDEA導(dǎo)入jar包的方法
IntelliJ IDEA導(dǎo)入項目的方法
idea設(shè)置自動導(dǎo)入依賴的方法步驟
python實現(xiàn)線性回歸算法
ASP.NET MVC使用異步Action的方法
Vue如何提升首屏加載速度實例解析
Java JUC中操作List安全類的集合案例
				