事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好

为解决这一问题，Vue 为 v-on 提供了事件修饰符，常用有以下几个：

1. .stop
2. .prevent
3. .once
4. .enter
5. ...

具体参考

地址：https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers

阻止默认事件

xxxxxxxxxx
<template>
    <div>
        <a @click.prevent="clickHandle" href="https://www.itbaizhan.com">百战程序员</a>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        clickHandle(){
            console.log(111);
        }
    }
}
</script>

阻止事件冒泡

xxxxxxxxxx
<template>
    <div @click="clickDiv">
        <p @click.stop="clickP">测试冒泡</p>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        clickDiv(){
            console.log("div");
        },
        clickP(){
            console.log("P");
        }
    }
}
</script>

实时效果反馈

1. 下列那个事件修饰符是阻止事件冒泡的属性：

A .prevent

B .stop

C .once

D .enter

答案

1=>B

数组变化侦测