stop阻止点击事件继续传播 阻止冒泡
capture添加事件监听器时使用事件捕获模式 自己子元素 会触发添加了capture 修饰符的父元素的 事件 再处理子元素的事件逻辑
once 事件只触发一次
self 只有是自身元素时才会触发事件处理 如果其子元素间接触发则不会触发
prevent 阻止默认行为 如a标签点击会跳转 添加prevent修饰符则不会进行跳转
passive 不阻止默认行为 按照通俗的理解:提前告诉浏览器 这个事件有默认行为的话我不会阻 止的,浏览器你就不要花费去想了 直接触发吧（代码就不写了）
写代码看下具体结果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>.box-outer {width: 200px;height: 200px;border: 1px solid #000fff;}.box-inner {margin: 50px auto;width: 100px;height: 100px;background-color: #c9c0c9;}</style><body><div id="app"><!-- 外层盒子 --><div class="box-outer" @click="clickOuter"><!-- 内层盒子 --><div class="box-inner" @click="clickInner"><!-- a标签 --><a @click="clickA" href="/npm/vue@2.7.14/dist/vue.esm.browser.js">跳转</a></div> </div></div><script type="module">import Vue from "/npm/vue@2.7.14/dist/vue.esm.browser.js";const vm = new Vue({name: "HelloWorld",el: "#app", methods: {clickOuter() {console.log('outer');},clickInner() {console.log('inner');},clickA() {console.log('a标签');},},});</script></body></html>
1.如果不加任何修饰符的话 点击a标签会跳转，点击内部盒子会先触发clickInner，
再触发clickOuter
2.a标签加上prevent修饰符时，点击不会跳转 不做演示
3.添加once 修饰符后，则事件只触发一次
4.外层盒子加.self,点击内部盒子只触发了内部盒子回调 外部盒子没触发回调
<div class="box-outer" @click.self="clickOuter">
5.内部盒子加.stop，阻止事件冒泡，点击内部盒子时只会触发内部盒子事件回调，不会触发外部盒子的事件回调（去掉了外部盒子上的self 之后也不会触发）
<!-- 外层盒子 --><div class="box-outer" @click="clickOuter"><!-- 内层盒子 --><div class="box-inner" @click.stop="clickInner"><!-- a标签 --><a@click="clickA"href="/npm/vue@2.7.14/dist/vue.esm.browser.js">跳转</a></div></div>
6.外层盒子添加capture修饰符，改造代码增加一个最内层盒子增加点击事件 点击时打印信息
点击最内层的盒子时发现会先触发 外层有capture修饰符的盒子的事件回调，其次是自身的 最后是没有加capture修饰符的外层盒子依次向外冒泡
<div class="box-outer" @click.capture="clickOuter"><!-- 内层盒子 --><div class="box-inner" @click="clickInner"><!-- a标签 --><!-- <a@click="clickA"href="/npm/vue@2.7.14/dist/vue.esm.browser.js">跳转</a> --><div class="box-iin" @click="clickIin">最内层盒子</div></div></div>
修饰符可以连续添加 如click.prevent.self 顺序很重要，使用需注意
