v-on 事件修饰符

Technorati Tags: vue

事件修饰符：

1. .stop 阻止冒泡
2. .prevent 阻止默认事件
3. .capture 添加事件侦听器时使用事件捕获模式
4. .self 只当该事件在该元素本身时（不是子元素）触发时才回调
5. .once 事件只触发一次

一、.stop 修饰符：

1、未加.stop事件修饰符：

<div id="app"> <div class="outer" @click="outerDivHandler"> <div class="inner" @click="innerDivHandler"> <button @click="btnHandler">点我</button> </div> </div> </div> <script> var app = new Vue({ el: "#app", data() { }, methods: { btnHandler() { console.log("btnHandler事件触发了"); }, innerDivHandler() { console.log("innerDivHandler事件触发了"); }, outerDivHandler() { console.log("outerDivHandler事件触发了"); }, }, }); </script>

输出结果，点击按钮时分别触发了，父级的事件。