v-on 是 vue 中处理用户交互的核心指令，支持完整写法 v-on:click="handleclick" 和简写 @click="handleclick"，通过修饰符（如 .stop、.prevent）简化事件控制，并提供 $event 访问原生事件对象。
v-on 是 Vue 中处理用户交互的核心指令，它让 HTML 元素能响应点击、输入、键盘等事件，并触发对应逻辑。真正让事件处理既简洁又可控的，是它的修饰符系统——不用手写 event.preventDefault() 或 stopPropagation()，一个点号就能解决。
基础绑定与调用方式
v-on 支持两种常用写法：完整写法 v-on:click="handleClick" 和简写 @click="handleClick"。方法名后是否加括号，取决于你是否要传参：
- 不传参时，
@click="handleClick"和@click="handleClick()"效果一致，推荐省略括号，更清晰 - 需要传参时，必须用括号形式，如
@click="deleteItem(id)" - 若同时要访问原生事件对象，用特殊变量
$event显式传递：@click="submitForm('save', $event)"
事件对象怎么拿？
Vue 会自动把原生 Event 对象传给无参方法，比如：
@click="logEvent" → methods: { logEvent(e) { console.log(e.target, e.clientX) } }
但一旦你传了自定义参数（比如 @click="handle('confirm')"），Vue 就不再自动传事件对象了。这时必须手动加 $event：
@click="handle('confirm', $event)" → handle(msg, e) { e.preventDefault(); console.log(msg); }
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
常见有用属性： e.target（实际点击的子元素）、e.currentTarget（绑定事件的元素）、e.key（按键名）。
事件修饰符：一行代替多行 JS
修饰符写在事件名后，用点号连接，可连用。它们不是语法糖，而是直接映射到 DOM 事件行为：
-
.stop→ 等价于e.stopPropagation()，阻止冒泡。适合按钮嵌套在可点击卡片中时，避免触发外层事件 -
.prevent→ 等价于e.preventDefault()，常用于表单提交：@submit.prevent="onSubmit" -
.self→ 只有点击元素本身才触发，不响应子元素冒泡上来的事件 -
.once→ 事件只执行一次，适合初始化操作或防重复提交 -
.capture→ 在捕获阶段监听，较少用，但可用于某些特殊布局拦截
多个修饰符可组合，顺序不影响效果，例如：@click.stop.prevent 或 @click.prevent.stop 都有效。
按键与系统修饰符
针对键盘事件，Vue 提供语义化按键修饰符，避免硬编码 keyCode：
-
@keyup.enter、@keydown.esc、@keypress.tab - 组合键支持：
@keyup.ctrl.s（Ctrl+S）、@keydown.alt.arrowup - 修饰键单独使用需配合其他键，
@keyup.ctrl不生效；但@keyup.ctrl.enter可以
注意：修饰符区分大小写，.enter 有效，.Enter 无效；中文输入法下 keyup 可能延迟触发，如需实时响应建议用 input 事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
