v-on事件修饰符
.stop,.prevent,.capture,.self,.once
冒泡是从子元素到父元素,捕获是从父元素到子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.inner{
height: 150px;
background-color: forestgreen;
}
.outer{
padding: 30px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 冒泡是从子元素到父元素,捕获是从父元素到子元素 -->
<!-- .stop 阻止冒泡 -->
<!-- <div class="inner" @click="div1Handel">
<input type="button" value="按钮" @click.stop="btn">
</div> -->
<!-- .prevent 阻止默认行为 -->
<!-- <a href="http://www.baidu.com" @click.prevent="aHandel">点击跳转百度</a> -->
<!-- .capture 实现捕获触发机制 -->
<!-- <div class="inner" @click.capture="div1Handel">
<input type="button" value="按钮" @click="btn">
</div> -->
<!-- .self 只有点击当前元素的时候,才会触发事件处理函数 -->
<!-- <div class="inner" @click.self="div1Handel">
<input type="button" value="按钮" @click="btn">
</div> -->
<!-- .once只能触发一次事件处理函数 -->
<!-- <input type="button" value="按钮" @click.once="btn"> -->
<!-- self和once的区别 -->
<!-- self只会阻止自己身上的冒泡行为的触发,并不会真正阻击冒泡的行为 -->
<!-- <div class="outer" @click="div2Handel">
<div class="inner" @click="div1Handel">
<input type="button" value="按钮" @click.once="btn">
</div>
</div> -->
<div class="outer" @click="div2Handel">
<div class="inner" @click.self="div1Handel">
<input type="button" value="按钮" @click="btn">
</div>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
},
methods:{
div1Handel () {
console.log("这是 inner div 的打印数据")
},
btn () {
console.log("这是 按钮的 打印数据")
},
aHandel () {
console.log("点击跳转链接")
},
div2Handel () {
console.log("这是 outer div的打印数据")
}
}
})
</script>
</body>
</html>