请描述Vue常用的修饰符 ？
参考回答
Vue 提供了一些常用的事件修饰符，用于简化事件处理和增强事件的控制能力。常见的修饰符有：.stop、.prevent、.capture、.self、.once、.passive 等。通过这些修饰符，可以让开发者更方便地控制事件的行为，避免手动编写过多的逻辑代码。
详细讲解与拓展
.stop（event.stopPropagation()）- 用于阻止事件冒泡。默认情况下，事件会从触发它的元素向上冒泡到父元素，使用
.stop修饰符后，事件的传播将被停止。
示例：
<button @click.stop="handleClick">Click Me</button>- 在这个例子中，点击按钮时事件不会冒泡到父元素，
handleClick方法只会在按钮上触发。
- 用于阻止事件冒泡。默认情况下，事件会从触发它的元素向上冒泡到父元素，使用
.prevent（event.preventDefault()）- 用于调用
event.preventDefault()方法，阻止事件的默认行为。常见的应用场景是阻止表单提交、链接跳转等。
示例：
<form @submit.prevent="handleSubmit">Submit</form>- 在这个例子中，表单的默认提交行为会被阻止，
handleSubmit方法会被执行，而不会刷新页面。
- 用于调用
.capture（事件捕获阶段）- 用于设置事件的捕获阶段触发。Vue 默认监听的是事件的冒泡阶段，但如果使用
.capture修饰符，事件会在捕获阶段触发。
示例：
<div @click.capture="handleClick">Click Me</div>- 在这个例子中，事件监听器会在事件从根节点开始向目标元素传播之前捕获事件。
- 用于设置事件的捕获阶段触发。Vue 默认监听的是事件的冒泡阶段，但如果使用
.self（事件触发者是当前元素）- 用于限制事件只在当前元素上触发，事件不会在子元素上触发。即事件只有在点击目标元素本身时才会被触发，点击子元素时事件不会被处理。
示例：
<div @click.self="handleClick">Click Me</div>- 只有点击
<div>元素本身时，handleClick方法才会被执行。如果点击的是<div>内部的子元素，事件将不会触发。
.once（只触发一次）- 用于使事件监听器只触发一次，触发后自动移除。常用于需要只响应一次点击等事件的场景。
示例：
<button @click.once="handleClick">Click Me Once</button>- 在这个例子中，
handleClick只会在第一次点击时被触发，后续的点击将不会再触发该事件。
.passive（被动事件监听）- 用于将事件监听器标记为被动，这对于滚动事件尤为重要，因为它能够告知浏览器，事件处理程序不会调用
preventDefault()方法，从而优化滚动性能。
示例：
<div @scroll.passive="handleScroll">Scroll Me</div>- 在这个例子中，
handleScroll是一个被动的事件监听器，告诉浏览器无需等待事件处理，优化了滚动性能。
- 用于将事件监听器标记为被动，这对于滚动事件尤为重要，因为它能够告知浏览器，事件处理程序不会调用
总结
Vue 的事件修饰符使得事件处理更加简洁和高效。常用的修饰符包括 .stop（阻止事件冒泡）、.prevent（阻止默认行为）、.capture（事件捕获阶段）、.self（事件触发者是当前元素）、.once（只触发一次）和 .passive（优化滚动性能）。这些修饰符可以帮助开发者简化代码，避免在事件处理函数中编写过多的逻辑。