vue.js事件處理器是什么
監(jiān)聽事件
可以用v-on指令監(jiān)聽DOM事件來觸發(fā)一些javascript代碼。
demo:
<div v-on:click="++counter">點擊,增加1</div> <span>{{counter}}</span>
data:{ counter:0 }
方法事件處理器
許多事件處理器的邏輯都很復(fù)雜,所以直接把javaScript代碼寫在v-on指令中是不可行的。因此v-on可以接收一個定義的方法來調(diào)用
<div v-on:click="counter()">點擊,增加1</div> <span>{{counter}}</span>
data:{ counter:0 }, method:{ counter:function(){ this.counter++; } }
有時也需要在內(nèi)聯(lián)語句處理器中訪問原生DOM事件,可以用特殊變量$event把它傳入方法:
$event 原生事件對象
事件修飾符
在事件處理程序中調(diào)用event.preventDefault()或event.stopPropagagation()是非常常見的需求。盡管我們可以在methods中輕松實現(xiàn)這點,但更好的
方式是:methods只是純粹的數(shù)據(jù)邏輯,而不是去處理DOM事件的細(xì)節(jié)。
為了解決這個問題,Vue.js為v-on提供了事件修飾符,通過由(.)表示的指令后綴來調(diào)用修飾符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件冒泡 --> <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> <!-- 添加事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當(dāng)事件在該元素本身(而不是子元素)觸發(fā)時觸發(fā)回調(diào) --> <div v-on:click.self="doThat">...</div>
新增
<!--點擊事件將只會觸發(fā)一次--> <a v-on:click.once="dothis"></a>
不像其他只能對原生的DOM事件起作用的修飾符,.once修飾符還能被用到自定義的組件事件上
按鍵修飾符
在監(jiān)聽鍵盤事件時,我們經(jīng)常需要監(jiān)聽常見的鍵值?! ue允許為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.keyCodes對象 自定義案件修飾符別名
//可以使用v-on:keyup.f1 Vue.config.keyCodes.f1=112
按鍵修飾符 新增
可以用如下修飾符開啟鼠標(biāo)或鍵盤事件監(jiān)聽,使在按鍵按下時發(fā)生反應(yīng)。
.ctrl
.alt
.shift
.meta
注意:在不同系統(tǒng)的鍵盤上,meta對應(yīng)的鍵不一樣
為什么在HTML中監(jiān)聽事件
你可能注意到這種事件監(jiān)聽的方式違背了關(guān)注點分離的傳統(tǒng)理念。不必?fù)?dān)心,因為所有的Vue.js事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的ViewModel上,它不會導(dǎo)致任何維護上的困難。實際上,使用v-on有幾個好處:
1 掃一眼HTML模板便能輕松定位在JavaScript代碼里對應(yīng)的方法
2 因為你無須在JavaScript里手動綁定事件,你的viewModel代碼可以是非常純粹的邏輯,和DOM完全解耦,更易于測試。
3 當(dāng)一個ViewModel被銷毀時,所有的事件處理器都會自動被刪除,你無須擔(dān)心如何自己清理它們。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的方法詳解
這篇文章主要介紹了vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的詳細(xì)方法,非常不錯,具有一定的參考借鑒借鑒價值,需要的朋友可以參考下2018-06-06在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03vue3中如何使用Pinia實現(xiàn)數(shù)據(jù)持久化操作
使用vue3中的pinia,我們可以在多個頁面間共享數(shù)據(jù),但是一旦我們關(guān)閉或刷新頁面,這些數(shù)據(jù)就會丟失,因此,我們需要有一種數(shù)據(jù)持久化的解決方案,下面我們就來看看具體如何解決的吧2023-10-10UNIapp實現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法
這篇文章主要介紹了UNIapp實現(xiàn)局域網(wǎng)內(nèi)在線升級的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法
這篇文章主要介紹了vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法,本文介紹的非常詳細(xì),具有參考借鑒價值,感興趣的朋友一起看看吧2016-09-09默認(rèn)瀏覽器設(shè)置及vue自動打開頁面的方法
今天小編就為大家分享一篇默認(rèn)瀏覽器設(shè)置及vue自動打開頁面的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09