基本用法

— 监听事件 —

标准写法：

<button v-on:click="handler">按钮</button>

简写形式：
<button @click="handler">按钮</button>

事件处理器类型

— 内联事件处理器 — 示例：

<button @click="count++">Add 1</button>

— 方法事件处理器 — 示例代码：

<script setup>
function greet(event) {
  alert("Hello!")
  console.log(event.target) // 原生事件对象
}
</script>

模板部分：

<button @click="greet">Greet</button>

参数传递技巧

-- 传递自定义参数 --
<button @click="say('hello')">Say hello</button>

-- 同时传递参数和事件对象 --
方式1（使用 $event）：
<button @click="warn('Warning', $event)">Submit</button>

方式2（箭头函数）：
<button @click="(e) => warn('Warning', e)">Submit</button>

事件修饰符

修饰符列表： .stop - 阻止事件冒泡 .prevent - 阻止默认行为 .self - 仅当事件源是元素自身时触发 .capture - 使用捕获模式 .once - 只触发一次 .passive - 优化滚动性能（不可与.prevent共用）

使用示例： ■ 阻止表单提交

■ 组合使用 <a @click.stop.prevent=“doThat”>

■ 滚动优化

按键处理

— 基本按键修饰符 — 示例：

<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />

— 系统组合键 — Alt+Enter 示例： <input @keyup.alt.enter=“clear” />`

Ctrl点击示例： <div @click.ctrl="doSomething"></div>

— 精确控制 — .exact 用法： ■ 单独Ctrl <button @click.ctrl.exact="onCtrlClick">

■ 无修饰键 <button @click.exact="onPureClick">

鼠标按键处理

专用修饰符： .left - 左键点击 .right - 右键点击 .middle - 中键点击

使用示例：

<div @click.left="leftAction">左键操作</div>
<div @contextmenu.right="rightAction">右键菜单</div>

重要注意事项

1. 修饰符顺序影响：

   • @click.prevent.self → 阻止所有点击默认行为
   • @click.self.prevent → 仅阻止自身点击行为

2. 系统修饰符特性：

   • keyup.ctrl 需按住ctrl松开其他键触发
   • keydown 事件会立即触发

3. 鼠标逻辑定义：

   • 按键修饰符基于设备逻辑而非物理按键
   • 触控板操作可能触发不同修饰符

4. 性能优化：

   • 复杂场景避免内联处理器
   • 大量事件使用被动模式优化滚动