1.prevent:阻止默认事件(常用)
2. stop:阻止事件冒泡(常用)
3. once:事件只触发一次(常用)
4.captrue:使用事件的捕捉模式(不常用)
5.self:只有event.target是当前操作的元素时才触发事件(不常用)
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)
①.prevent:阻止默认行为
--对于如<a href="www.baidu.com" @click.prevent="linkMethod">百度</a>自带事件的,添加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就可以阻止默认行为了，效果都是一样的
<!-- .prevent:阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
二、 阻止事件冒泡（常用）.stop
编写代码，实现例子
我们发现，单击完确定后会继续弹窗，这就是一个冒泡事件
阻止的方式和上一个例子类似，我这里以及下面都用vue特定的阻止行为了
我们在单击事件前面加上.stop
<!-- .stop:阻止事件冒泡 -->
<button @click.stop="showInfo">点我提示信息</button>
再次验证浏览器，解决问题
三、事件只触发一次（常用）.once
编写代码
如图，按钮点击多少次，就会弹窗多少次
我们加上once修饰符
<!-- 3.once:事件只触发一次 --><button @click.once="showInfo">点我提示信息</button>
四、使用事件的捕捉模式（不常用）.capture
.capture 实现捕获触发事件的机制。即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。（若有多个该修饰符，则由外而内触发）
<!-- 4.captrue:使用事件的捕捉模式 --><div class="box1" @click.capture="showMsg(1)">div1 <div class="box2" @click="showMsg(2)">div2</div></div>
五、 只有event.target是当前操作的元素时才触发事件(不常用) .self
.self 实现只有点击当前元素时候，才会触发事件处理函数。
<!-- 5.只有event.target是当前操作的元素时才触发事件 --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div>
六、事件的默认行为立即执行，无需等待事件回调执行完毕（不常用) .passive
文章转载：【Vue】五个最常用的事件修饰符_vue事件修饰符_心。晴的博客-CSDN博客
