vue学习笔记1、事件修饰符

.stop阻止冒泡

.prevent阻止默认事件

.capture 捕获机智

.self 只有点击自己才执行（只会阻止自己发生的冒泡，并不会阻止别人的冒泡）

.once 只触发一次就失效

<body>
    <div id="app">
        <div class="box" @click="div">
            <!-- .stop阻止冒泡，当父标签和子标签重合后，点击子标签执行时间后父标签也会随着执行，就会出问题，加上.stop就可以阻止冒泡 -->
            <button @click.stop="but">点我</button>
        </div>
            <!-- .prevent阻止默认时间，这个a标签默认打开链接，加上这个.prevent就可以禁止默认事件了，类似的还有form表单 -->
        <a href="http://www.baidu.com" @click.prevent="clj">超链接</a>

        <!-- .capture 捕获机智，和冒泡是相反的，冒泡是先执行子标签 在执行父标签，捕获机制是先执行当前点击的，在执行后面的 -->
        <div class="box" @click.capture="div">
                <!-- .stop阻止冒泡，当父标签和子标签重合后，点击子标签执行时间后父标签也会随着执行，就会出问题，加上.stop就可以阻止冒泡 -->
                <button @click.stop="but">点我</button>
        </div>
        <!-- .self 只有点击自己才执行 -->
        <div class="box" @click.self="div">
                <!-- .stop阻止冒泡，当父标签和子标签重合后，点击子标签执行时间后父标签也会随着执行，就会出问题，加上.stop就可以阻止冒泡 -->
                <button @click="but">点我</button>
        </div>
        <!-- .once 只触发一次就失效 -->
        <a href="http://www.baidu.com" @click.prevent.once="clj">超链接</a>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "张毅大帅逼！",
        },
        methods: {
            div() {
                console.log("点击了div")
            },
            but() {
                console.log("点击了按钮")
            },
            clj(){
                console.log("点击超链接了")
            }
        }
    })
</script>

vue学习笔记1、事件修饰符

猜你喜欢