vue修饰符（.stop，.prevent，.capture）

语法：@事件.修饰符

.stop修饰符

 .stop 是JS的一种机制，阻止事件冒泡机制

事件冒泡：由于标签是嵌套的，触发内层标签事件的时候，同时也会触发外层标签的事件

<div id="app">
   <div @click="fun1">
         <span @click="fun2">单击</span>
    </div>
</div>

<script>
        let vm=new Vue({
            el:"#app",
            data:{},
            methods: {
                fun1(){
                    console.log("fun1执行了")
                },
                fun2(){
                    console.log("fun2执行了")
                },
            },
        })
    </script>

此时由于点击的span标签嵌套在div标签中，所以在触发span标签时，事件会发生冒泡，外层的div

的事件也会被触发

---

 在有些情况下，不需要触发外层标签事件，就需要阻止内层标签冒泡，就可以使用.stop冒泡，让内层标签触发之后，不再冒泡，修改后的代码如下所示

<div id="app">
   <div @click="fun1">
         <span @click.stop="fun2">单击</span>
    </div>
</div>

.prevent修饰符

.prevent 阻止超链接行为

不加修饰符时，点击链接之后，在触发事件之后，页面自动跳转至目标页面

<div id="app">
    <a href="http://www.baidu.com" @click="fun2">单击</a>
</div>

<script>
        let vm=new Vue({
            el:"#app",
            data:{},
            methods: {
                fun1(){
                    console.log("fun1执行了")
                },
                fun2(){
                    console.log("fun2执行了")
                },
            },
        })
    </script>

如果只希望触发事件，不希望超链接页面跳转，可以添加.prevent修饰符，修改之后的代码如下所示

<div id="app">
    <a href="http://www.baidu.com" @click.prevent="fun2">单击</a>
</div>

事件触发了，同时阻止了超链接页面的跳转 

---

.capture修饰符

.capture 实现事件捕获机制
默认事件执行顺序是：先执行fun2，再执行fun1（冒泡的顺序
加上.capture修饰符之后，先执行加有capture的事件，然后再执行fun2事件

（先触发带有该修饰符的元素，如果有多个该修饰符，则由外而内触发，先触发带有该修饰符的元素）

<div id="app">
   <div @click.capture="fun1">
       <span @click="fun2">单击</span>
   </div>
</div>

<script>
        let vm=new Vue({
            el:"#app",
            data:{},
            methods: {
                fun1(){
                    console.log("fun1执行了")
                },
                fun2(){
                    console.log("fun2执行了")
                },
            },
        })
    </script>