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

news2025/6/23 4:05:44

注释很详细，直接上代码

新增内容

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

源码

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