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  阅读(198)  评论(0)    收藏  举报