Vue事件修饰符的总结

        分为六点：

          1.prevent 阻止默认行为(常用)

            2.stop 阻止事件冒泡(常用)

            3.once 事件值触发一次(常用)

            4.capture 使用事件的捕获模式

            5.self 只有event.target是当前操作的元素是才触发事件

            6.passive 事件的默认行为立即执行 无需等待事件回调执行完毕

---

我们可以分别看一下具体是怎么使用：

1 prvent 阻止默认行为 

 <div class="root">
        <a href="http://www.baidu.com" @click.prevent='show'>点我</a> 
  // 点击之后会发现 并不会跳转百度页面 
    </div>
    <script>
        new Vue({
            el:'.root',
            data: {

            },
            methods: {
                show(){
                    alert('你好');
                }
            },
        })
    </script>

2 stop 阻止冒泡行为

 <div class="stop" @click.stop='show1'>
              <button @click.stop='show1'> 阻止冒泡</button>
//如果不用.stop则会发生事件冒泡 出现两次你好弹窗
    </div>
    <script>
     
        new Vue({
            el:'.stop',
            data: {

            },
            methods: {
                show1(){
                    alert('你好');
                }
            },
        })
    </script>

3.once 只触发一次

  <div class="once">
        <button @click.once='show2'>只触发一次</button>
//支触发一次的意思就是 当点击完成第一次事件后 再次点击就不生效
    </div>
  <script>
    
        new Vue({
            el: '.once',
            data: {

            },
            methods: {
                show2() {
                    alert('你好');
                }
            },
        })
    </script>

4 capture使用事件的捕获模式

 <div class="capture" @click.capture='show3(1)'>
        <button @click='show3(2)'>触发捕获</button>
//如果没有.capture 事件修饰符 则结果输出位 2 1 冒泡行为
//这里使用了.capture后 输出结果为 1 2 触发捕获阶段 从外向里
    </div>
 <script>
     
        new Vue({
            el: '.capture',
            data: {

            },
            methods: {
                show3(a) {
                    console.log(a);
                }
            },
        })
    </script>

5 self 

 <div class="capture" @click.self='show3()'>
        <button @click='show3()'>点击我</button>
//效果类似于 .prevent 可以阻止冒泡 
//如果不加这里会输出 两个 <button>点击我</button>
//因为只是冒泡上只是触发了输出 但是并没有输出div 
    </div>
 <script>
     
        new Vue({
            el: '.capture',
            data: {

            },
            methods: {
                show3(e) {
                    console.log(e.target);
                }
            },
        })
    </script>

6  passive 我的理解为 相当于异步 就是不等回调函数执行完毕进而直接先立即执行默认行为