事件修饰符

• .prevent 修饰符

  有时你需要阻止事件默认行为，例如，当链接被单击时阻止页面的跳转，这时你可以使用 .prevent 修饰符：

  <a v-on:click.prevent="handler" href="http://www.baidu.com">百度</a>
  

• .stop 修饰符

  如果想要阻止事件继续传播（冒泡），以避免在父元素上触发事件，可以使用 .stop 修饰符：

  <button v-on:click.stop="handler">点击</button>
  

• .once 修饰符

  如果想要只在第一次触发事件的时候触发事件监听器，可以使用 .once 修饰符：

  <button v-on:click.once="handler">点击</button>
  

• .capture 修饰符

  如果想要使用捕获模式，可以使用 .capture 修饰符：

  <div v-on:click.capture="handler">
    <button v-on:click="handler">点击</button>
  </div>
  

  捕获模式是指事件会在传递到当前元素的下级元素前先出发，这和冒泡模式的事件传播顺序时相反的。

• .self 修饰符

  如果只想监听（父）元素本身而不是它的子元素上触发的事件，可以使用 .self 修饰符：

  <div v-on:click.self="handler" style="
    width: 200px; 
    height: 200px; 
    border: 1px solid black;">
      <button v-on:click="handler">点击</button>
  </div>
  

  这种情况下，点击子元素时，不会触发其父元素的事件监听器，只有点击子元素以外，父元素以内的区域时，父元素的事件监听器才会被触发执行。

• 同时使用多个修饰符

  也可以只设置事件名和修饰符而不传入事件监听器，而且可以将修饰符串联起来使用。

  <div v-on:click.stop.capture.once></div>
  

  这个例子会阻止单击事件沿 DOM 树向下传递，但只在第一次触发时有效。

• 按键修饰符

  除了上述事件修饰符，还有一些按键修饰符。它们用在键盘事件上，只有在特定按键按下时才会触发事件。

  <div id="app" v-cloak>
    <form v-on:keyup="handler">
      <label>username: <input type="text"> </label>
      <label>password: <input type="password"> </label>
    </form>
  </div>
  

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          counter: 0
        }
      },
      methods: {
        handler(e) {
          if (e.keyCode === 27)
            console.info('按键 Esc 被按下');
        }
      }
    });
  </script>
  

  对于上面这种情况，Vue 内置了一种基于修饰符的方式来处理，可以将按键的 keyCode 作为修饰符，简化成：

  <form v-on:keyup.27="handler">...</form>
  

  这样，你就不用在代码中对 keyCode 进行 if 判断了。

  Vue 还为最常用的按键提供了别名（以便于记忆）：.enter 、.tab 、delete 、esc 、.space 、.up 、.down 、.left 和 .right 。因此，@keyup.27 可以使用 @keyup.esc 来替代。

• .exact 修饰符

  最后，如果想在只有被指定的按键被按下，但没有其它按键被按下的时候才触发事件监听器，可以使用 .exact 修饰符：

  <input v-on:keydown.enter.exact="handler">
  

  有 @keyup 自然就有 @keydown 。