Vue.js 中的事件处理指令详解

2025-06-26 18:50:50作者：劳婵绚Shirley

📄 Documentation for Vue 3

项目地址：https://gitcode.com/gh_mirrors/docs6/docs

事件指令基础概念

在 Vue.js 框架中，事件处理是其核心功能之一。开发者可以通过在模板中使用特殊的指令来监听 DOM 事件，并在触发时执行相应的 JavaScript 代码。这些指令以 @ 符号开头，后跟事件名称，例如 @click、@mouseover 等。

常见事件指令分类

鼠标事件

@click - 元素被点击时触发
@dblclick - 元素被双击时触发
@mousedown - 鼠标按钮在元素上按下时触发
@mouseup - 鼠标按钮在元素上释放时触发
@mouseover - 鼠标移入元素时触发
@mouseout - 鼠标移出元素时触发
@mousemove - 鼠标在元素上移动时触发
@mouseenter - 鼠标进入元素时触发（不冒泡）
@mouseleave - 鼠标离开元素时触发（不冒泡）

键盘事件

@keydown - 键盘按键按下时触发
@keypress - 键盘按键按下并产生字符时触发
@keyup - 键盘按键释放时触发

表单事件

@input - 输入元素值改变时触发
@change - 输入元素值改变并失去焦点时触发
@submit - 表单提交时触发
@focus - 元素获得焦点时触发
@blur - 元素失去焦点时触发
@select - 输入框文本被选中时触发

触摸事件

@touchstart - 触摸开始时触发
@touchend - 触摸结束时触发
@touchmove - 触摸移动时触发
@touchcancel - 触摸被取消时触发

其他常用事件

@scroll - 元素滚动时触发
@resize - 窗口或元素大小改变时触发
@load - 资源加载完成时触发
@error - 资源加载失败时触发
@contextmenu - 右键菜单触发

事件修饰符

Vue.js 为事件处理提供了特殊的修饰符，可以方便地处理常见的事件需求：

.stop - 调用 event.stopPropagation()
.prevent - 调用 event.preventDefault()
.capture - 使用捕获模式添加事件监听器
.self - 只有当事件是从监听器绑定的元素本身触发时才触发回调
.once - 事件将只会触发一次
.passive - 以 { passive: true } 模式添加监听器

使用建议

对于频繁触发的事件（如 scroll、mousemove），考虑使用防抖或节流技术优化性能
移动端开发时，优先考虑触摸事件而非鼠标事件
表单验证通常结合 @input 和 @blur 事件使用
键盘事件处理时，可以通过事件对象获取按键信息

理解这些事件指令的用法和区别，能够帮助开发者构建更加交互丰富的 Vue.js 应用。在实际开发中，应根据具体场景选择最适合的事件类型，并结合 Vue.js 提供的事件修饰符来简化代码逻辑。

📄 Documentation for Vue 3

项目地址：https://gitcode.com/gh_mirrors/docs6/docs

登录后查看全文

项目优选

收起

OpenHarmony documentation | OpenHarmony开发者文档

deepin linux kernel

ohos_react_native

React Native鸿蒙化仓库

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

flutter_flutter

一个用于服务器应用开发的综合工具库。 - 零配置文件 - 环境变量和命令行参数配置 - 约定优于配置 - 深刻利用仓颉语言特性 - 只需要开发动态链接库，fboot负责加载、初始化并运行。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

cangjie_compiler

仓颉编译器源码及 cjdb 调试工具。

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！