8. 事件修饰符

8. 事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

1.常用的事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

8.1 stop事件修饰符

用来阻止事件冒泡

<div id="app">
    <div class="aa" @click="divClick">
        
        <input type="button" value="按钮" @click.stop="btnClick">
    div>
div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert('button被点击了');
            },
            divClick(){
                alert('div被点击了');
            }
        }
    });
script>

8.2 prevent 事件修饰符

用来阻止标签的默认行为

		
    <a href="http://www.baizhibest.com/" @click.prevent="aClick">教育a>

8.3 self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

		
    <div class="aa" @click.self="divClick">
        
        <input type="button" value="按钮" @click.stop="btnClick">
        <input type="button" value="按钮1" @click="btnClick1">
    div>

8.4 once 事件修饰符

once 一次 作用: 就是让指定事件只触发一次

    
    <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">教育a>