Vue常用的修饰符有以下几种：

• .prevent：阻止默认事件；
• .stop：阻止事件冒泡；
• .capture：添加事件监听器时使用事件捕获模式；
• .self：只有当事件是从事件源自身触发时才触发事件；
• .once：只触发一次；
• .passive：指示浏览器不要执行默认的滚动行为（提高性能）。
  修饰符的应用场景有很多，下面展示几个常见的示例：

.prevent 阻止默认事件：

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="name" />
    <button type="submit">Submit</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  methods: {
    submitForm() {
      // 处理表单提交逻辑
    },
  },
};
</script>

在上面的代码中，当用户提交表单时，页面不会重新加载，而是调用 submitForm 方法处理表单提交逻辑。

.stop 阻止事件冒泡：

<template>
  <div @click="outer">
    <div @click.stop="inner">Inner Div</div>
  </div>
</template>
<script>
export default {
  methods: {
    outer() {
      console.log("Outer Div clicked");
    },
    inner() {
      console.log("Inner Div clicked");
    },
  },
};
</script>

在上面的代码中，当用户点击 Inner Div 时，只会触发 inner 方法，不会触发 outer 方法。

.once 只触发一次：

<template>
  <button @click.once="doSomething">Click Me</button>
</template>
<script>
export default {
  methods: {
    doSomething() {
      console.log("Button clicked");
    },
  },
};
</script>

在上面的代码中，当用户点击按钮时，只会触发 doSomething 方法一次。

.self 只有当事件是从事件源自身触发时才触发事件：

<template>
  <div @click.self="doSomething">
    <button>Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    doSomething() {
      console.log("Div clicked");
    },
  },
};
</script>

在上面的代码中，当用户点击按钮时，不会触发 doSomething 方法，只有当用户点击 div 元素时才会触发。

.passive 指示浏览器不要执行默认的滚动行为（提高性能）：

<template>
  <div @scroll.passive="doSomething">
    <!-- 大量内容 -->
  </div>
</template>
<script>
export default {
  methods: {
    doSomething() {
      console.log("Div scrolled");
    },
  },
};
</script>