Vue事件修饰符

1、stop阻止冒泡

    <style>
        .outer {
            width: 500px;
            height: 300px;
            background: greenyellow;
        }
        .inner {
            width: 300px;
            height: 200px;
            background: hotpink;
        }
        .lastInner {
            width: 150px;
            height: 100px;
            background: mediumaquamarine;
        }
    </style>

    <div id="app">
        <div class="outer" @click="outer">
            <div class="inner" @click.stop="inner">
                <div class="lastInner" @click.stop="lastInner">

                </div>
            </div>
        </div>
    </div>

<script>
       var vm = new Vue({
            el: '#app',
            data: {
              
            },
            methods: {
                outer() {
                    console.log("最外层盒子");
                },
                 inner() {
                    console.log("内层盒子");
                },
                 lastInner() {
                    console.log("最内层盒子");
                },
            }
        })
</script>

2、prevent阻止默认事件

   <div id="app">
        <a href="https://www.baidu.com" target="_blank"  @click.prevent="clickA">百度</a>
    </div>

<script>
        var vm = new Vue({
                el: '#app',
                data: {
                 
                },
                methods: {
                    clickA() {
                        console.log("点击a标签");
                    }
                }
            })
</script>

3、capture添加事件侦听器时使用事件捕获模式

  <style>
        .outer {
            width: 500px;
            height: 300px;
            background: greenyellow;
        }

        .inner {
            width: 300px;
            height: 200px;
            background: hotpink;
        }

        .lastInner {
            width: 150px;
            height: 100px;
            background: mediumaquamarine;
        }
    </style>

    <div id="app">
        <div class="outer" @click.capture="outer">
            <div class="inner" @click.capture="inner">
                <div class="lastInner" @click="lastInner">

                </div>
            </div>
        </div>
    </div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            outer() {
                console.log("最外层盒子");
            },
            inner() {
                console.log("内层盒子");
            },
            lastInner() {
                console.log("最内层盒子");
            },
        }
    })
</script>

4、self只当事件在该元素本身（比如不是子元素）触发时触发回调

    <style>
        .outer {
            width: 500px;
            height: 300px;
            background: greenyellow;
        }

        .inner {
            width: 300px;
            height: 200px;
            background: hotpink;
        }

        .lastInner {
            width: 150px;
            height: 100px;
            background: mediumaquamarine;
        }
    </style>

    <div id="app">
        <div class="outer" @click.self="outer">
            <div class="inner" @click.self="inner">
                <div class="lastInner" @click.self="lastInner">

                </div>
            </div>
        </div>
    </div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            outer() {
                console.log("最外层盒子");
            },
            inner() {
                console.log("内层盒子");
            },
            lastInner() {
                console.log("最内层盒子");
            },
        }
    })
</script>

5、once事件只触发一次

    <style>
        .outer {
            width: 300px;
            height: 200px;
            background: mediumpurple;
        }
    </style>

    <div id="app">
        <div class="outer" @click.once="onlyOne">

        </div>
    </div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            onlyOne() {
                console.log("只执行一次");
            }
        }
    })
</script>