Vue事件修饰符（stop，prevent，self，capture）

Vue事件修饰符简单demo

<template>
    <div class="modify">
        <!--基本事件-->
        <div @click="divEven">
            <a href="https://www.baidu.com" @click="aEven">基本事件</a>
        </div>
        <!--阻止冒泡事件-->
        <div @click="divEven">
            <a href="https://www.baidu.com" @click.stop="aEven">阻止冒泡事件</a>
        </div>
        <!--阻止默认事件-->
        <div @click="divEven">
            <a href="https://www.baidu.com" @click.prevent="aEven">阻止默认事件</a>
        </div>
        <!--只有点击他本身时才去执行，点击他的子元素不去执行-->
        <div @click.self="divEven">
            <a href="https://www.baidu.com" @click="aEven">只有点击本身才执行</a>
        </div>
        <!--触发捕获事件-->
        <div @click.capture="divEven">
            <a href="https://www.baidu.com" @click.self="aEven">触发捕获事件</a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "modify",
        data(){
            return{
                
            }
        },
        methods:{
            divEven(){
                alert("我是div盒子事件")
            },
            aEven(){
                alert("我是a链接事件")
            }
        }
    }
</script>