v-on的修饰符若没有加.stop，则在点击按钮2时控制台会输出firstbtn和lastbtn，加上.stop可以解决

一、事件修饰符

阻止事件冒泡

<div @click="firstClick">
  按钮1
  <button @click.stop="lastClick">按钮2</button>
</div>

firstClick() {
  console.log("firstbtn");
},
lastClick() {
  console.log("lastbtn");
},

若没有加.stop，则在点击按钮2时控制台会输出firstbtn和lastbtn，加上.stop可以解决这个问题。

阻止默认事件，例如：当提交表单的时候，页面会自动刷新，在加上.prevent可以阻止。

<form @submit.prevent="submitClick">
  <button type="submit" value="提交">按钮3</button>
</form>

注意：prevent加在form上

submitClick() {
  console.log("submitbtn");
},

在捕获的过程监听，没有capture修饰词都是默认冒泡过程监听的。默认的冒泡过程是从里到外执行事件，若有capture则先冒泡带有关键字的事件，然后再从里向外执行。

<div @click="firstClick">
  <div @click.capture="secondClick">
    <div @click="lastClick">点这</div>
  </div>
</div>

firstClick() {
  console.log("firstbtn");
},
secondClick() {
  console.log("secondbtn");
},
lastClick() {
  console.log("lastbtn");
},

默认输出顺序加上capture后的顺序

.self只执行直接作用于该元素身上的事件，忽略了其他元素的冒泡或者捕获事件。

<div @click="firstClick">1
  <div @click.self="secondClick">2
    <div @click="lastClick">点这</div>
  </div>
</div>

firstClick() {
  console.log("firstbtn");
},
secondClick() {
  console.log("secondbtn");
},
lastClick() {
  console.log("lastbtn");
},

当点击的时候，控制台只输出

lastbtn
firstbtn

因为secondbtn上加了.self，跟.stop阻止冒泡事件的情况差不多,但不同的是当点击lastbtn时.stop是将冒泡事件停止于自身，而.self是让冒泡事件跳过自身继续执行。
而当点击secondbtn时，控制台输出为

secondbtn
firstbtn

这是因为.self只执行直接作用于自身的事件，然后冒泡事件继续，忽略了其他元素的冒泡或者捕获事件。

只触发一次回调
例如：有一个按钮，不管按多少次，也只有第一次按会触发回调，后面的不会再触发。

.passive可以提前告诉浏览器可以不用去查询程序有没有阻止默认事件。这一般用在滚动监听，因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

监听键盘事件

<input type="text" @keyup.enter="submitClick">

只有当按下回车时才会触发事件。