在 Vue 3 中，事件修饰符用于提供对事件行为的额外控制，使得开发者可以更灵活地处理 DOM 事件。以下是 Vue 3 中常用的事件修饰符：
.stop
功能：阻止事件冒泡。事件冒泡是指事件从触发它的目标元素逐级向上传播到父元素的过程。使用 .stop 修饰符后，事件将不会继续传播到父元素。 示例：
<template> <div @click="parentClick"> <button @click.stop="childClick">点击我（不会触发父级事件）</button> </div></template>
.prevent
功能：阻止事件的默认行为。例如，点击链接后的跳转、表单提交等默认行为可以被 .prevent 修饰符阻止。 示例：
<template> <a @click.prevent="handleClick" href="https://www.example.com">点击我（不会跳转）</a></template>
.capture
功能：使用事件捕获模式。在捕获模式下，事件会从文档的根节点开始向下传播，直到触发事件的目标元素。使用 .capture 修饰符后，事件监听器将在捕获阶段触发。 示例：
<template> <div @click.capture="parentCapture"> <button @click="childClick">点击我（先触发父级捕获事件）</button> </div></template>
.self
功能：只有当事件是从绑定事件的元素本身触发时，才会调用事件处理函数。如果事件是从子元素冒泡上来的，则不会触发。 示例：
<template> <div @click.self="parentClick"> 点击此处才会触发 <button>点击按钮不会触发父级事件</button> </div></template>
.once
功能：事件监听器最多只触发一次，触发后会自动移除。 示例：
<template> <button @click.once="handleClick">只能点击一次</button></template>
.passive
功能：将事件监听器设置为被动模式，提高滚动性能。被动模式的事件监听器不会调用 preventDefault()，因此适合用于滚动事件等场景。注意，.passive 修饰符不能与 .prevent 修饰符同时使用。 示例：
<template> <div @scroll.passive="handleScroll">滚动优化</div></template>
按键修饰符
功能：用于监听特定的键盘按键事件。Vue 3 提供了一些常用的按键别名，如 .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right 等。 示例：
<template> <input @keyup.enter="submitForm" placeholder="按回车提交"> <input @keyup.esc="cancelInput" placeholder="按 ESC 取消"></template>
系统修饰键
功能：用于监听带有系统修饰键（如 Ctrl、Alt、Shift、Meta）的键盘事件。 示例：
<template> <button @click.ctrl="handleCtrlClick">按住 Ctrl 点击</button> <input @keyup.ctrl.enter="handleCtrlEnter"></template>
.exact
功能：用于精确匹配系统修饰键的组合。例如，.ctrl.exact 只会在单独按下 Ctrl 键时触发，而不会与其他按键组合触发。 示例：
<template> <button @click.ctrl.exact="onlyCtrl">仅按住 Ctrl 时触发</button></template>
鼠标修饰符
功能：用于监听特定的鼠标按键事件。Vue 3 提供了 .left、.right、.middle 修饰符，分别对应鼠标左键、右键、中键的点击事件。 示例：
<template> <button @click.right="showContextMenu">右键点击显示菜单</button></template>
这些事件修饰符可以单独使用，也可以组合使用，以满足不同的需求。例如，@click.stop.prevent 可以同时阻止事件冒泡和默认行为。需要注意的是，修饰符的顺序可能会影响事件的处理结果，因此在使用时应根据具体需求合理安排修饰符的顺序。
