Vue时间修饰符

<body>
  <!-- 
      Vue中的事件修饰符：
          1.prevent：阻止默认事件（常用）；
          2.stop：阻止事件冒泡（常用）；
          3.once：事件只触发一次（常用）；
          4.capture：使用事件的捕获模式；
          5.self：只有event.target是当前操作的元素时才触发事件；
          6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
  -->
  <!-- 准备好一个容器 -->
  <div id="root">
    <h2 id="showInfo">欢迎来到{{name}}学习</h2>
    <!-- 阻止默认事件（常用） -->
    <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

    <!-- 阻止事件冒泡（常用） -->
    <div class="box" @click="showInfo">
      <button @click.stop="showInfo">点我提示信息</button>
    </div>

    <!-- 事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息</button>

    <!-- 使用事件的捕获模式 -->
    <div class="box1" @click.capture="showMsg(1)">
      div1
      <div class="box2" @click.capture="showMsg(2)">
        div2
      </div>
    </div>

    <!-- 只有event.target是当前操作的元素时才触发事件 -->
    <div class="box" @click.self="showInfo">
      <button @click="showInfo">点我提示信息</button>
    </div>

    <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
    <ul @scroll.passive='demo' class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
<script>
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷'
    },
    methods: {
      showInfo(e) {
        alert('同学你好')
        // console.log(e.target);
      },
      showMsg(svg) {
        console.log(svg);
      },
      demo() {
        for (let i = 0; i < 1000; i++) {
          console.log('#');
        }
        console.log('类似了');
      },
    },
  })
</script>

重点是修饰符的前三个，后三个了解就可以了，第六个在移动端用处比较大，PC端很少用第三个。

posted @ 2022-08-02 14:08 RoddyBryce 阅读(191) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端框架VUE

· CSS变量

· vue事件修饰符

· vue-day9--事件修饰符

· Vue事件修饰符

公告

昵称： RoddyBryce
园龄： 2年11个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

牵猫散步的鱼

Vue时间修饰符

公告

搜索

常用链接

最新随笔

随笔档案

阅读排行榜