vue中的事件修饰符

1.1 prevent：阻止默认事件（常用）

        <!-- 阻止默认事件（常用） -->
        <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
        a标签的默认有跳转到href的行为，我们把默认行为禁用后，就不会跳转页面

1.2 stop：阻止事件冒泡（常用）

        <!-- 阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
            <!-- 修饰符可以连续写 -->
             <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> 
        </div>

1.3 once：事件只触发一次（常用）

        <!-- 事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>

1.4 capture：使用事件的捕获模式

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
 

1.5 self：只有event.target是当前操作的元素时才触发事件

        <!-- 只有event.target是当前操作的元素时才触发事件； -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>