注释很详细,直接上代码
上一篇
新增内容
- 事件修饰符之阻止冒泡
- 事件修饰符之阻止默认行为
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 挂载点 -->
<div id="root">
<!-- @click.stop 阻止冒泡-->
<!-- 1.未阻止冒泡时:点击子容器时显示“子容器被点击,父容器被点击” -->
<div style="height: 200px; width: 200px; background-color: aqua;" @click="click_1">
<div style="height: 100px; width: 100px; background-color: blue;" @click="click_2"></div>
</div>
<!-- 2.阻止冒泡时:点击子容器只输出“子容器被点击” -->
<div style="height: 200px; width: 200px; background-color: red;" @click="click_3">
<div style="height: 100px; width: 100px; background-color: blue;" @click.stop="click_4"></div>
</div>
<!-- 阻止默认行为:此时是不会跳转链接的-->
<a @click.prevent="click_5" href="https://www.baidu.com">链接</a>
</div>
<!-- 导入vue的js代码:不会下载的看专栏第一篇 -->
<script src="./lib/vue2.js"></script>
<script>
const app = new Vue({// Vue实例
el: '#root',// 挂载点
data: {// 数据
},
methods: {// 方法
click_1() {
console.log('父容器被点击!')
},
click_2() {
console.log('子容器被点击!')
},
click_3() {
console.log('父容器被点击!')
},
click_4() {
console.log('子容器被点击!')
},
click_5() {
console.log('a标签被点击!')
}
}
})
</script>
</body>
</html>
效果演示
文章来源:https://www.toymoban.com/news/detail-850046.html
下一篇文章来源地址https://www.toymoban.com/news/detail-850046.html
到了这里,关于vue快速入门(十六)事件修饰符的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!