.stop

阻止事件冒泡，如下，点击inner元素时不会触发外层box的clickBox事件

<div class="box" @click="clickBox">
  <div class="inner" @click.stop="clickInner"></div>
</div>

.prevent

阻止浏览器默认事件，等同于调用preventDefault

.capture

事件捕捉，在事件冒泡阶段中先触发使用了.capture的事件，如果有多个.capture则从外到内的顺序触发事件。剩余事件按冒泡机制依次触发

<div class="box1" @click.capture="clickBox('box1')">
  <div class="box2" @click.capture="clickBox('box2')">
    <div class="box3" @click.stop="clickBox('box3')">
      <div class="box4" @click.stop="clickBox('box4')">
      </div>
    </div>
  </div>
</div>
<script>
clickBox(v) {
  console.log(v) // 依次输出box1、box2、box4、box3
}
</script>

.self

只有元素本身触发时才触发方法，就是只有点击元素本身才会触发。比如一个div里面有个按钮，div和按钮都有事件，我们点击按钮，div绑定的方法也会触发，如果div的click加上self，只有点击到div的时候才会触发，变相的算是阻止冒泡

  <!-- 点击按钮不会触发clickDiv -->
<div @click.self="clickDiv">
  <button @click="clickBtn"></button>
</div>

.once

事件只执行一次，无论后续点击多少次只有第一次生效。

#

.{key}

监听键盘事件时，可以用这个修饰符指定监听哪个键。

<input @keydown.enter="handleSearch" />

.{keyCode}

监听键盘事件时，可以用这个修饰符指定监听哪个键的键码。使用建码或者.{key}

<input @keydown.13="handleSearch" />