Vue3學(xué)習(xí)之事件處理詳解
更新時(shí)間：2022年12月07日 09:11:29 作者：世界盡頭與你
Vue事件處理是每個(gè)Vue項(xiàng)目的必要方面。 它用于捕獲用戶輸入，共享數(shù)據(jù)以及許多其他創(chuàng)造性方式。本文將通過簡(jiǎn)單的示例為大家講解了Vue3中事件處理的使用，需要的可以參考一下
1.基本使用
我們可以使用 v-on 指令來監(jiān)聽 DOM 事件，從而執(zhí)行 JavaScript 代碼。
v-on 指令可以縮寫為 @ 符號(hào)。
語法格式：
v-on:click="methodName"
或
@click="methodName"
一個(gè)最簡(jiǎn)單的事例：
<div id="app">
<button @click="counter += 1">增加 1</button>
<p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>
<script>
const app = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(app).mount('#app')
</script>
但是在通常情況下，我們需要使用一個(gè)方法來調(diào)用 JavaScript 方法。
v-on 可以接收一個(gè)定義的方法來調(diào)用。
<div id="app">
<button @click="greet">點(diǎn)我</button>
</div>
<script>
const app = {
data() {
return {
name: 'Dahe'
}
},
methods: {
greet(event) {
alert('Hello ' + this.name + '!')
}
}
}
Vue.createApp(app).mount('#app')
</script>
事件處理程序中可以有多個(gè)方法，這些方法由逗號(hào)運(yùn)算符分隔：
<div id="app">
<!-- 這兩個(gè) one() 和 two() 將執(zhí)行按鈕點(diǎn)擊事件 -->
<button @click="one($event),two($event)">
點(diǎn)我
</button>
</div>
<script>
const app = {
data() {
},
methods: {
one(event) {
alert("第一個(gè)事件處理器邏輯...")
},
two(event) {
alert("第二個(gè)事件處理器邏輯...")
}
}
}
Vue.createApp(app).mount('#app')
</script>
2.事件修飾符
Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細(xì)節(jié)
Vue.js 通過由點(diǎn) . 表示的指令后綴來調(diào)用修飾符。
- .stop - 阻止冒泡
- .prevent - 阻止默認(rèn)事件
- .capture - 阻止捕獲
- .self - 只監(jiān)聽觸發(fā)該元素的事件
- .once - 只觸發(fā)一次
- .left - 左鍵事件
- .right - 右鍵事件
- .middle - 中間滾輪事件
例子：
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁(yè)面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- click 事件只能點(diǎn)擊一次 --> <a v-on:click.once="doThis"></a>
實(shí)操：
<div id="app">
<button v-on:click.once="counter += 1">增加 1</button>
<p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>
添加了事件修飾符，此按鈕只能點(diǎn)擊一次
3.按鍵修飾符
Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
例如：
<!-- 只有在按住鍵盤enter鍵時(shí)調(diào)用 vm.submit() --> <input v-on:keyup.enter="submit">
實(shí)例：
<div id="app">
<button v-on:keyup.enter="counter += 1">增加 1</button>
<p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>
此時(shí)按鈕只有在選中后按住enter鍵才能執(zhí)行 + 1 操作：
到此這篇關(guān)于Vue3學(xué)習(xí)之事件處理詳解的文章就介紹到這了,更多相關(guān)Vue3事件處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue路由跳轉(zhuǎn)傳參或者打開新頁(yè)面跳轉(zhuǎn)問題
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參或者打開新頁(yè)面跳轉(zhuǎn)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
provide/inject 是 Vue.js 中用于跨組件傳遞數(shù)據(jù)的一種高級(jí)技術(shù)，它可以將數(shù)據(jù)注入到一個(gè)組件中，然后讓它的所有子孫組件都可以訪問到這個(gè)數(shù)據(jù)，這篇文章主要介紹了VUE中常用的4種高級(jí)方法,需要的朋友可以參考下2023-05-05
vue 獲取及修改store.js里的公共變量實(shí)例
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue?3?表格時(shí)間監(jiān)控與動(dòng)態(tài)后端請(qǐng)求觸發(fā)詳解?附Demo展示
在Vue3中,使用el-table組件渲染表格數(shù)據(jù),通過el-table-column指定內(nèi)容,時(shí)間點(diǎn)需前端校準(zhǔn),用getTime()比較,到達(dá)時(shí)觸發(fā)操作,異步API請(qǐng)求可用async/await處理,setInterval實(shí)現(xiàn)定時(shí)監(jiān)控,配合條件判斷防止重復(fù)請(qǐng)求2024-09-09
vue2.0采用了虛擬DOM來代替對(duì)真實(shí)DOM的操作，最后通過某種機(jī)制來完成對(duì)真實(shí)DOM的更新，渲染視圖。這篇文章主要介紹了vue2.0的虛擬DOM渲染,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue中的總線機(jī)制(EventBus)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了Vue3中使用鉤子函數(shù)來修改路由中的meta屬性值的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
這篇文章主要為大家詳細(xì)介紹了Vue3中的計(jì)算屬性和屬性監(jiān)聽的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
本次小編通過一個(gè)簡(jiǎn)單的實(shí)例來教給大家如何寫一個(gè)vue插件，以及需要注意的地方，如果有需要的讀者跟著學(xué)習(xí)一下吧。2017-11-11
本文主要介紹了el-table渲染慢卡頓問題最優(yōu)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08