Vue常见的事件修饰符

1.prevent:阻止默认事件(常用)
2. stop:阻止事件冒泡(常用)
3. once:事件只触发一次(常用)
4.captrue:使用事件的捕捉模式(不常用)
5.self:只有event.target是当前操作的元素时才触发事件(不常用)
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)

①.prevent:阻止默认行为

        --对于如百度自带事件的,添加prevent事件后,href跳转路径将不会触发

②.stop:阻止冒泡

        --对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果子级元素设置@click.stop的话就不会触发父级的click事件

③.once: 事件只触发一次(常用表单提交)

④.capture: 对于冒泡事件,且存在多个冒泡事件时,存在该修饰符的会优先执行,如果有多个,则从外到内执行

⑤.passive: 滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用,浏览器内核线程在每个事件执行时查询prevent,造成卡顿,使用passive将会跳过内核线程查询,进而提升流畅度

⑥.self:仅绑定元素自身触发,防止事件冒泡

        --对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果父级元素设置@click.self的话就不会被子级元素的click事件影响

⑦.native: 将vue组件转换为一个普通的HTML标签,如果该修饰符用在普通html标签上是不起任何作用的

一、阻止默认事件（常用）.prevent

例子：一个简单的超链接标签，我们给一个百度链接和一个单击事件

 查看页面，虽然点击文字出现了弹窗，但是随之跳到了超链接指向的地址

 跳转到链接是a标签的默认行为，那么我们怎么阻止这个默认行为呢？

普通阻止默认行为方式

使用参数对象的preventDefault方法

 这时候浏览器点击文字提示框后就不会跳转了

vue阻止默认行为方式

在vue中，不用我们亲自编写上面的方式，我们可以在事件后面跟一个.prevent就可以阻止默认行为了，效果都是一样的

 
点我提示信息

二、 阻止事件冒泡（常用）.stop

编写代码，实现例子

 我们发现，单击完确定后会继续弹窗，这就是一个冒泡事件

 阻止的方式和上一个例子类似，我这里以及下面都用vue特定的阻止行为了

我们在单击事件前面加上.stop

点我提示信息

再次验证浏览器，解决问题

三、事件只触发一次（常用）.once

 编写代码

如图，按钮点击多少次，就会弹窗多少次

 

我们加上once修饰符

 点我提示信息

四、使用事件的捕捉模式（不常用）.capture

 .capture 实现捕获触发事件的机制。即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。（若有多个该修饰符，则由外而内触发）

   
      

        div1 
        

            div2
        
      

五、 只有event.target是当前操作的元素时才触发事件(不常用) .self

.self 实现只有点击当前元素时候，才会触发事件处理函数。

 
      

        点我提示信息
    

 

 六、事件的默认行为立即执行，无需等待事件回调执行完毕（不常用) .passive

 

 文章转载：【Vue】五个最常用的事件修饰符_vue事件修饰符_心。晴的博客-CSDN博客