v-on 是 vue 中绑定事件监听器的核心指令，用于响应用户操作；支持内联表达式与方法调用两种写法，可传参及获取 event 对象，提供 .prevent、.stop 等修饰符简化处理，并支持监听子组件通过 $emit 触发的自定义事件。
v-on 是 Vue 中绑定事件监听器的核心指令，用于响应用户操作，比如点击、输入、提交等。它本质是把 DOM 事件和 Vue 实例中的逻辑连接起来，写法简洁，语义清晰。
基础写法：@click 和 methods 配合
最常用的是监听点击事件，有两种主流写法：
- 内联表达式：
@click="count++"，适合简单逻辑，如数值自增 - 方法调用：
@click="handleClick"，推荐用于含多步逻辑或需复用的场景 - 注意：方法名后不加括号（
@click="handleClick"）时，Vue 会自动把原生 event 对象作为第一个参数传入；加了括号（@click="handleClick()"）则需显式传参，否则参数为undefined
传参与获取 event 对象
当需要同时传自定义参数和原生事件对象时，用 $event 显式占位：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
-
@click="submitForm('login', $event)"→ 方法接收(type, event) -
@click="logEvent"→ 方法签名logEvent(event) { ... }，event 自动注入 -
@click="logEvent()"→ 方法内event为undefined，除非手动传
事件修饰符简化常见处理
避免在方法里反复写 event.preventDefault() 或 event.stopPropagation()，直接用修饰符：
-
@submit.prevent—— 阻止表单默认提交（无 handler 时也生效） -
@click.stop—— 阻止事件冒泡 -
@click.once—— 仅触发一次 -
@keyup.enter—— 键盘回车触发（支持别名和键码） - 多个修饰符可串联：
@click.stop.prevent
监听子组件自定义事件
父组件用 @xxx 监听子组件通过 this.$emit('xxx') 触发的事件：
- 子组件中：
this.$emit('update-name', newName) - 父组件中：
<user-form></user-form> - 注意：事件名区分大小写，DOM 模板中一律转为小写，推荐用短横线命名（
save-data），避免saveData失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
