vue快速入门（十六）事件修饰符

注释很详细，直接上代码

新增内容

事件修饰符之阻止冒泡
事件修饰符之阻止默认行为

源码

<!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>