Vue 事件處理 傳參 以及事件的修飾符 的學習

睡觉爱打呼噜發表於2024-05-14
Vue事件

事件處理

在vue中使用v-on來進行監聽事件，可以簡寫成@

兩種展示方式

內聯事件處理器（較為簡單  理解就行）
方法事件處理器

兩者的區別就是 內聯事件處理器是直接寫在v-on裡面的，
<button @click="count++">自增</button>
方法事件處理器是寫在js裡面的
<button @click="addCount">點選自增</button>
<p>{{ count }}</p>

事件傳參

vue中的event物件就是原生js中獲取物件的方式

傳遞引數

可以直接在@click=“addCount(引數)”  傳遞給下面的方法裡面，
假如想要繼續獲取到event物件，直接在item後面新增 $event
例如這個：
<p @click="getNames(item)" v-for="(item,index) of names ">{{ item }}</p>
getNames(name){
        console.log(name)
    }

事件修飾符

目的以及理解
就是為了簡化程式碼，使用一些常用的event的物件的時候，可以使用	一些事件修飾符更快的去解決問題

例如

阻止事件進行
<a @click.prevent="handle($event)" href="baidu,com">百度</a>
雖然點選了 但是頁面不進行跳轉

阻止事件冒泡（觸發子元素的同時父元素也一起觸發稱為冒泡）

<div @click="clickDiv">
<a @click.stop="clickA">測試事件冒泡</a>
</div>
js裡面有兩個列印的進行測試

相關文章