事件处理
事件绑定 @click="handler"，handler 可以是方法名、内联语句或表达式。内联语句需要事件对象时用特殊变量 $event 显式传入；方法名形式时 Vue 自动把事件作为第一个参数。
事件修饰符省去手写 e.preventDefault()：.stop 阻止冒泡、.prevent 阻止默认行为、.once 只触发一次、.self 只在元素自身触发。按键修饰符如 @keyup.enter、系统修饰符 @click.ctrl 让键盘交互写起来更快。
- @click="fn" 自动传事件对象；内联语句用 $event 手动传
- .stop/.prevent/.once/.self 是最常用的事件修饰符
- @keyup.enter / .esc / @click.ctrl 等按键修饰符替代 keyCode 判断
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>事件处理</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <!-- 方法名形式：自动接收事件对象 --> <button @click="onClick">点我</button> <!-- 内联语句 + $event 手动传事件 --> <button @click="say('嗨', $event)">带参</button> <!-- 修饰符：.stop 阻止冒泡，.once 只触发一次 --> <div @click="log('外层')"> <button @click.stop="log('内层')">阻冒泡</button> <button @click.once="log('只一次')">只一次</button> </div> <!-- 按键修饰符 --> <input @keyup.enter="log('回车提交')" placeholder="按回车"> <!-- .prevent 阻止表单默认提交跳转 --> <form @submit.prevent="log('AJAX 提交')"><button>提交</button></form> </div> <script> const { createApp } = Vue; createApp({ setup() { const onClick = (e) => console.log('点击', e.type); const say = (msg, e) => console.log(msg, e.target.tagName); const log = (m) => console.log(m); return { onClick, say, log }; } }).mount('#app'); </script> </body> </html>
本节要点事件三件套：方法/内联两种绑定、$event 拿事件对象、修饰符省掉 preventDefault 手写。
