陛下请批阅
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#div1 {
width: 100px;
height: 90px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<!-- .stop: 阻止冒泡 (事件触发顺序:里 -- 外) -->
<!--<div @click="div1Click">-->
<!--<input type="button" value="点我" @click.stop="btnClick">-->
<!--</div>-->
<!-- .prevent: 阻止默认行为 -->
<!--<a href="http://www.baidu.com" @click.prevent="aClick">去百度</a>-->
<!-- .capture: 捕获出发事件机制 (事件触发顺序: 外 -- 里) -->
<!--<div @click.capture="div1Click">-->
<!--<input type="button" value="点我" @click="btnClick">-->
<!--</div>-->
<!-- .once: 事件只出发一次 -->
<!--<input type="button" value="点我" @click.once="btnClick">-->
<!-- .self: 只有点击当前元素时才会出发函数 -->
<!--<div id="div1" @click.self="div1Click">-->
<!--<input type="button" value="点我" @click.stop="btnClick">-->
<!--</div>-->
<!-- 事件修饰符可以组合使用 -->
<!--<div @click="div1Click">-->
<!--<input type="button" value="点我" @click.stop.once="btnClick">-->
<!--</div>-->
</div>
<script>
var vm = new Vue({
el: '#app',
methods: {
btnClick() {
console.log("点击了按钮");
},
div1Click() {
console.log("点击了div");
},
aClick() {
console.log("点击了a链接");
}
}
});
</script>
</body>
</html>
