What are the event modifiers provided by vue?

Vue.js 中的事件修饰符是一种特殊的语法，用于指示编译器如何处理 DOM 事件。以下是 Vue 提供的一些常见事件修饰符：

1. .stop - 调用 event.stopPropagation()，阻止事件继续传播。例如，在嵌套的元素中，防止点击事件冒泡到父元素。

   html
   <button @click.stop="doThis">点击我</button>

2. .prevent - 调用 event.preventDefault()，阻止事件的默认行为。常用于提交表单之前进行验证，而不让表单提交。

   html
   <form @submit.prevent="onSubmit">提交</form>

3. .capture - 使用事件捕获模式，即内部元素的事件先于外部元素触发。

   html
   <div @click.capture="doThis">点击我</div>

4. .self - 只当事件在该元素本身（而非子元素）触发时处理。

   html
   <div @click.self="doThis">点击我</div>

5. .once - 事件将只会触发一次。

   html
   <button @click.once="doThis">点击我</button>

6. .passive - 用于性能优化，表明事件处理程序不会调用 preventDefault()。

   html
   <div @scroll.passive="onScroll">内容</div>

这些修饰符可以单独使用，也可以组合使用来实现更细粒度的事件处理。例如，想要一个只触发一次且不冒泡的点击事件处理器，可以这样写：

html
<button @click.stop.once="doThis">点击我</button>

使用这些修饰符可以使得事件处理逻辑更加清晰和简洁，有助于提升代码的可读性和可维护性。