快捷導(dǎo)航

VUE3 click點(diǎn)擊事件及修飾符詳解

更新時間：2024年08月16日 15:10:39 作者：GIS-CL

這篇文章主要介紹了VUE3 click點(diǎn)擊事件及修飾符的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

只綁定一個點(diǎn)擊事件

<button @click="greet">單個點(diǎn)擊事件</button>

methods:{
        greet(){
            console.log('單個點(diǎn)擊事件')
        }
    }

一個標(biāo)簽內(nèi)綁定多個點(diǎn)擊事件方法

<button @click="one($event), two($event)">多個點(diǎn)擊事件</button>

methods:{
        one(e){
            console.log(e)
        },
        two(e){
            console.log(e)
        }
    }

事件修飾符

.stop 阻止單擊事件繼續(xù)冒泡（適用于出現(xiàn)嵌套點(diǎn)擊事件時）

<div @click="box('我是大box')" style="width:500px; background:red">
    <button @click.stop="doThis('我是內(nèi)嵌點(diǎn)擊事件按')">單個點(diǎn)擊事件</button>
 </div>

 methods:{
        doThis(val){
            console.log(val)
        },
        box(val){
            console.log(val)
        }
    }

.prevent 阻止默認(rèn)事件

<form action="">
    <!-- 默認(rèn)提交事件 -->
    <!-- <input type="submit" value="提交"> -->
    <!-- 阻止默認(rèn)事件 -->
    <input type="submit" value="提交" @click.prevent="submitCLICK('prevent阻止默認(rèn)事件')">
  </form>

methods:{
        submitCLICK(val){
            console.log(val)
        }
    }

.capture 即內(nèi)部元素觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理

<form action="">
    <input type="submit" value="提交" @click.capture="submitCLICK('capture先在此處理')">
  </form>

methods:{
        submitCLICK(val){
            console.log(val)
        }
    }

.once點(diǎn)擊事件將只會觸發(fā)一次

<button @click.once="ononce('點(diǎn)擊事件將只會觸發(fā)一次')">點(diǎn)擊事件將只會觸發(fā)一次</button>

methods:{
        ononce(val){
            console.log(val)
        }
    }

.passive用在移動端的scroll事件，來提高瀏覽器響應(yīng)速度，提升用戶體驗(yàn)

<!-- 滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(fā)，   -->
<div @scroll.passive="onScroll">...</div>

修飾符串聯(lián)使用（按循序執(zhí)行）

// 按循序執(zhí)行先執(zhí)行阻止冒泡事件在執(zhí)行阻止默認(rèn)事件
<a @click.stop.prevent="doThat"></a>

TIP

不要把 .passive 和 .prevent（阻止默認(rèn)事件）一起使用，因?yàn)?.prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。

請記住，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為。

按鍵修飾符

Vue 為最常用的鍵提供了別名：

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

<!-- 只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()` 按enter鍵執(zhí)行 -->
<input @keyup.enter="submit" />
<!-- 按delete 鍵執(zhí)行 -->
<input @keyup.delete="submit" />

系統(tǒng)修飾鍵

.ctrl
.alt
.shift
.meta

<!-- Alt + Enter 時觸發(fā)-->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click 按住加點(diǎn)擊時觸發(fā)-->
<div @click.ctrl="doSomething">Do something</div>