vue-事件修饰符

详细 事件冒泡与取消默认事件 请跳转至 ☞

http://blog.csdn.net/qq940853667/article/details/77151701

以下是常用的事件，跟着代码写就好了

<template>
    <div>
        <h1>事件修饰符</h1>


        <!-- 父元素不捕获子元素的事件 -->
        <div class="bigBox" @click.self="bigClick">
            <div class="smallBox" @click="smallClick"></div>
        </div>


        <!-- 子元素不冒泡 -->
        <div class="bigBox" @click="bigClick">
            <div class="smallBox" @click.stop="smallClick"></div>
        </div>


        <!-- 不触发浏览器的默认事件，比如 a标签的默认事件的跳转 -->
        <div class="bigBox" @click.prevent="bigClick">
            <div class="smallBox" @click="smallClick"></div>
        </div>


        <!-- .once 该元素只能点击一次，第二次点就无效了 -->
        <div class="bigBox" @click.once="bigClick">
            <div class="smallBox" @click="smallClick"></div>
        </div>
    </div>      
</template>


<script>
    export default {
        data () {
            return {


            }
        },
        methods: {
            bigClick () {
                console.log('big')
            },
            smallClick () {
                console.log('small')
            }
        }
    }
</script>