大家好我是Java1234_小锋老师最近更新 《一天学会 Vue3 Vite element-plus UI框架 视频教程》专辑感谢大家支持。本课程主要介绍和讲解 Vue3框架Vite构建工具以及element-plus UI框架。Vue3核心知识介绍Vite构建工具使用以及element-plus UI框架的基础组件配置组件Form 表单组件Data 数据展示组件Navigation导航组件Feedback反馈组件Container布局组件介绍和使用。视频教程课件源码打包下载 链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234具体位置 - 第四阶段富客户端技术里面Vue3专题 - 事件处理事件处理用来监听用户操作点击、输入、键盘等并执行对应逻辑。Vue3 用v-on指令模板里通常写成更短的。适合按钮点击、表单提交、键盘回车搜索、阻止默认行为等场景。1. 为什么需要事件处理页面交互几乎都建立在「用户做了某件事 → 程序做出反应」。原生写法要自己addEventListener还要自己管解绑。Vue 里把事件和响应式数据绑在一起写法更集中!-- 推荐声明式绑定 -- button clickcount点我/button !-- 等价完整写法 -- button v-on:clickcount点我/button日常开发优先用事件名。2. 基本用法2.1 内联处理简单逻辑可以直接写在模板里script setup /** * 内联事件 Demo * 点击按钮让计数 1 */ import { ref } from vue const count ref(0) /script template p计数{{ count }}/p button clickcount1/button button clickcount 0清零/button /template运行截图2.2 方法处理逻辑稍复杂时写成函数更清晰也方便复用和加注释script setup /** * 方法事件 Demo * 把逻辑放进函数里 */ import { ref } from vue const count ref(0) /** 计数加一 */ function add() { count.value } /** 重置为 0 */ function reset() { count.value 0 } /script template p计数{{ count }}/p button clickadd1/button button clickreset清零/button /template运行截图注意模板里写clickadd传函数引用不要写成clickadd()除非你确实要立刻执行并传参见下一节。3. 传参与事件对象3.1 给处理函数传参需要传自定义参数时写成方法调用script setup /** * 事件传参 Demo */ import { ref } from vue const msg ref() /** 显示问候语 */ function sayHello(name) { msg.value 你好${name} } /script template p{{ msg }}/p button clicksayHello(小明)问候小明/button button clicksayHello(小红)问候小红/button /template运行截图3.2 同时拿到原生事件对象内联调用时如果还需要原生event用$eventscript setup /** * $event Demo * 自定义参数 原生事件对象一起用 */ import { ref } from vue const info ref() /** * 记录点击来源 * param {string} label 按钮名称 * param {MouseEvent} e 原生事件 */ function onClick(label, e) { info.value ${label}坐标(${e.clientX}, ${e.clientY}) } /script template p{{ info }}/p button clickonClick(按钮A, $event)按钮 A/button /template运行截图如果方法只有一个参数且是事件对象可以省略$eventbutton clickonClick点我/button对应函数function onClick(e) { ... }4. 事件修饰符修饰符写在事件名后面用.连接用来处理常见 DOM 细节少写样板代码。修饰符作用.stop阻止冒泡event.stopPropagation().prevent阻止默认行为event.preventDefault().self只有事件来自元素自身不是子元素冒泡上来才触发.once只触发一次.capture在捕获阶段监听.passive对应addEventListener的{ passive: true }示例script setup /** * 事件修饰符 Demo */ import { ref } from vue const log ref() /** 外层盒子被点击 */ function onOuter() { log.value 外层 → } /** 内层按钮被点击并阻止冒泡 */ function onInner() { log.value 内层(已 stop) } /** 提交表单阻止默认刷新 */ function onSubmit() { log.value 表单已提交页面未刷新 } /script template p{{ log }}/p !-- 点击内层不会触发外层因为 .stop 阻止了冒泡 -- div clickonOuter stylepadding: 16px; background: #f0f0f0 外层 button click.stoponInner内层/button /div !-- 阻止表单默认提交刷新 -- form submit.preventonSubmit button typesubmit提交/button /form !-- 只触发一次 -- button click.oncelog 只触发了一次点我一次/button /template修饰符可以连写例如click.stop.prevent。运行截图5. 按键修饰符监听键盘时可以限定具体按键写法说明keyup.enter回车keyup.escEsckeyup.space空格keyup.up/.down/.left/.right方向键keyup.ctrl/.alt/.shift/.meta系统修饰键script setup /** * 按键修饰符 Demo * 回车触发搜索 */ import { ref } from vue const keyword ref() const result ref() /** 模拟搜索 */ function search() { result.value keyword.value ? 搜索结果${keyword.value} : 请输入关键词 } /script template input v-modelkeyword placeholder输入后按回车 keyup.entersearch / p{{ result }}/p /template也可以组合keyup.ctrl.entersearchCtrl Enter。运行截图6. 入门综合 Demo一个迷你待办输入区支持点击添加、回车添加、清空列表并演示.prevent/.stop。script setup /** * 事件处理综合 Demo * - click / keyup.enter添加待办 * - submit.prevent阻止表单刷新 * - click.stop内层操作不冒泡到外层 */ import { ref } from vue /** 输入框内容 */ const text ref() /** 待办列表 */ const list ref([]) /** 底部日志 */ const tip ref(还没有操作) /** 添加一条待办 */ function addTodo() { const value text.value.trim() if (!value) { tip.value 内容不能为空 return } list.value.push(value) text.value tip.value 已添加${value} } /** * 删除某一项 * param {number} index 下标 */ function removeTodo(index) { const removed list.value[index] list.value.splice(index, 1) tip.value 已删除${removed} } /** 清空全部 */ function clearAll() { list.value [] tip.value 列表已清空 } /** 点击外层容器时的提示 */ function onPanelClick() { tip.value 你点到了面板空白处 } /script template div classpanel clickonPanelClick h3待办小 Demo/h3 !-- 提交时阻止页面刷新 -- form submit.preventaddTodo input v-modeltext placeholder输入待办回车或点添加 keyup.enteraddTodo / !-- .stop点按钮不要触发外层 panel 的 click -- button typesubmit click.stop添加/button button typebutton click.stopclearAll清空/button /form ul li v-for(item, index) in list :keyindex {{ item }} button typebutton click.stopremoveTodo(index)删除/button /li /ul p classtip{{ tip }}/p /div /template style .panel { padding: 16px; background: #f7f8fa; border-radius: 8px; } .tip { color: #666; font-size: 14px; } button { margin-left: 8px; } /style运行效果预期输入文字后按回车或点「添加」列表多一条输入框清空点「删除」只删该项不会触发面板的「点到空白处」提示.stop点面板空白处底部 tip 变成「你点到了面板空白处」表单提交不会刷新页面.prevent运行截图7. 快速对照写法示例说明基本监听clickfn最常用内联语句clickcount适合一行逻辑传参clickfn(id)调用方法并传参原生事件clickfn($event)需要 event 时阻止冒泡click.stop等价stopPropagation阻止默认submit.prevent等价preventDefault只触发一次click.once第二次不再触发按键keyup.enter限定按键