当前位置： 首页 > news >正文

Vue的事件处理、事件修饰符、键盘事件

news 2025/9/14 22:30:14

目录

  • 1. 事件处理基本使用
  • 2. 事件修饰符
  • 3. 键盘事件

1. 事件处理基本使用

  • 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名，比如click
  • methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root"><button @click="showInfo1">点我提示信息（不传参）</button><button @click="showInfo2($event,66)">点我提示信息（传参）</button>
</div><script type="text/javascript">const vm = new Vue({el:'#root',methods:{showInfo1(event){console.log(event.target.innerText)    // 点我提示信息（不传参）// console.log(this) //此处的this是vmalert('同学你好！')},showInfo2(event,number){console.log(number)     // 66alert('同学你好！！')}}})
</script></body>
</html>

2. 事件修饰符

注意: 多个事件修饰符可以连写，如@click.prevent.stop

  1. prevent：阻止默认事件（常用）。如点击<a/>标签不跳转
  2. stop：阻止事件冒泡（常用）。如div里面有一个button，都有click动作，只触发button的动作，而不进行冒泡触发div的动作
  3. once：事件只触发一次（常用）。如点击按钮函数只在第一次点击时触发
  4. capture：使用事件的捕获模式。如div里面有一个button，都有click动作。正常是先捕获到div，再捕获到button，然后执行button的动作，再执行div的动作。使用了capture会先执行div的动作，再执行button的动作
  5. self：只有event.target是当前操作的元素时才触发事件。如div里面有一个button，都有click动作。正常点击button两个动作都会被触发，现在点击button只触发button的动作。这个的效果和stop动作一样
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。如@wheel是鼠标滚轮的滚动监听, 使用passive先让右边的滚动条滚动，再执行触发的函数，否则执行顺序相反

使用示例如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script><style>.div1{height: 50px;background-color: skyblue;}.ul1{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style>
</head>
<body><div id="root"><h2>prevent: </h2><!-- 也可以通过调用: event.preventDefault()来实现 --><a href="http://www.baidu.com" @click.prevent="showInfo">点我不会跳转到百度</a><h2>stop: </h2><div class="div1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><h2>once: </h2><button @click.once="showInfo">点我提示信息</button><h2>capture: </h2><div class="div1" @click.capture="showMsg(1)"><button @click="showMsg(2)">我的消息后打印</button></div><h2>self: </h2><div class="div1" @click.self="showInfo"><button @click="showInfo">你点击的是按钮，而不是div哦</button></div><!-- @scroll是右边的滚动条的滚动监听, 不需要使用passive，滚动条先滚动，再执行触发的函数 --><!-- @wheel是鼠标滚轮的滚动监听, 使用passive先让右边的滚动条滚动，再执行触发的函数，否则执行顺序相反 --><h2>passive: </h2><ul @wheel.passive="cal" class="ul1"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">new Vue({el:'#root',methods:{showInfo(event){alert('同学你好！')console.log(event.target)},showMsg(msg){console.log(msg)},cal(){for (let i = 0; i < 3000; i++) {console.log('i')}console.log('累坏了')}}})
</script></body>
</html>

页面显示效果如下：
页面显示效果

3. 键盘事件

  • @keydown当键盘按下触发函数，@keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到

  • Vue中常用的按键别名：

    • 回车 => enter
    • 删除 => delete (捕获“删除”和“退格”键)
    • 退出 => esc
    • 空格 => space
    • 换行 => tab (特殊，必须配合keydown去使用)
    • 上 => up
    • 下 => down
    • 左 => left
    • 右 => right

  • Vue未提供别名的按键，可以使用按键原始的key值去绑定，但多个单词的注意要转为短横线命名。如Enter，caps-lock

  • 可以使用Vue.config.keyCodes.huiche = 13定义一个按键别名。但不推荐使用keyCode，因为不同浏览器的一个按键keyCode不一样，以后keyCode这种方式会被废弃

  • 系统修饰键（用法特殊）：ctrl、alt、shift、meta(windows图标)

    • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。如ctrl + s，key和keyCode是s和83，但是ctrl的key和keyCode是Control和17。也可以指定按键，如@keyup.ctrl.y="showInfo"
    • 配合keydown使用：正常触发事件

使用示例如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body><div id="root"><input type="text" placeholder="按下一个指定键让弹框显示值" @keyup.enter="showInfo">
</div><script type="text/javascript">Vue.config.keyCodes.huiche = 13new Vue({el: '#root',methods: {showInfo(event) {console.log(event.key, event.keyCode)    // 获取按键的名称和codealert(event.target.value)       // 获取输入框的值}}})
</script></body>
</html>

相关文章：

Vue的事件处理、事件修饰符、键盘事件

目录 1. 事件处理基本使用2. 事件修饰符3. 键盘事件 1. 事件处理基本使用 使用v-on:xxx或xxx绑定事件&#xff0c;其中xxx是事件名&#xff0c;比如clickmethods中配置的函数&#xff0c;都是被Vue所管理的函数&#xff0c;this的指向是vm或组件实例对象 <!DOCTYPE html&g…...

编程日记 2024/8/10 13:19:36

c++单例实践

C单例实践 在日常开发中&#xff0c;虽然太多的单例调用会让代码的耦合度变高&#xff0c;但是例如日志类这种&#xff0c;单例模式就变得非常有。所以这篇文章为大家介绍static 关键字相关知识以及如何实现自己的C单例类。 static关键字 首先让我们请出今天的主角: static。…...

编程日记 2024/8/10 13:17:34

SQL注入实例（sqli-labs/less-9）

0、初始页面 1、爆库名 使用python脚本 def inject_database1(url):name for i in range(1, 20):low 32high 128mid (low high) // 2while low < high:payload "1 and if(ascii(substr(database(),%d,1)) > %d ,sleep(2),0)-- " % (i, mid)res {"…...

编程日记 2024/8/10 13:15:32

http不同类型方法的作用，get和post区别

在HTTP协议中&#xff0c;不同的请求方法用于不同的操作。常见的HTTP方法包括GET、POST、PUT、DELETE、HEAD、OPTIONS、PATCH等&#xff0c;每种方法有其特定的作用。 常见的HTTP方法及其作用 1. GET - **作用**: 从服务器请求指定资源。GET方法通常用于获取数据而不会修改数据…...

编程日记 2024/8/10 13:12:28

# 利刃出鞘_Tomcat 核心原理解析（二）

利刃出鞘_Tomcat 核心原理解析&#xff08;二&#xff09; 一、 Tomcat专题 - Tomcat架构 - HTTP工作流程 1、Http 工作原理 HTTP 协议&#xff1a;是浏览器与服务器之间的数据传送协议。作为应用层协议&#xff0c;HTTP 是基于 TCP/IP 协议来传递数据的&#xff08;HTML文件…...

编程日记 2024/8/10 13:10:27

美团秋招笔试第三题（剪彩带）求助帖

题目描述及代码如下。 我使用模拟打表法&#xff0c;示例通过了&#xff0c;但是提交通过率为0。诚心求教。欢迎补充题目&#xff0c;或者有原题链接更好~。我觉得可能出错的点&#xff1a;int -> long long ?或者一些临界条件。 /* 美团25毕业秋招第三题&#xff0c;做题…...

编程日记 2024/8/10 13:09:25

LeetCode 算法：最小栈 c++

原题链接&#x1f517;&#xff1a;最小栈 难度&#xff1a;中等⭐️⭐️ 题目 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推…...

编程日记 2024/8/10 13:07:24

【解压既玩】PS3模拟器v0.0.32+战神3+战神升天+各存档 整合包 ，完美不死机，没有BUG，旷世神作，强力推荐

战神3是圣莫尼卡公司的大作&#xff0c;PS3 上必玩的游戏之一。 本文收集了战神3和升天两作&#xff0c;附存档&#xff0c;完美不死机&#xff0c;没有BUG&#xff0c;强烈推荐。 解压即玩。 立即下载&#xff1a;【chumenx.com】【解压既玩】PS3模拟器v0.0.32战神3战神升天…...

编程日记 2024/8/10 13:06:22

bootstrap- X-editable 行内编辑

前面不要忘记引入editable {field: weigh, title: __(Weigh),editable: {type: text,url: "api/cat/editWeigh",validate: function (v) {if($.trim(v) ) return 值不能为空;if(!$.isNumeric(v)) return 值只能为数字;if(v<0 || v%1!0) return 值必需为正整数;}…...

编程日记 2024/8/10 13:03:20

【LabVIEW学习篇 - 12】：通知器

文章目录 通知器案例一案例二案例三&#xff08;在不同VI中用同一个通知器&#xff09; 通知器 同步技术&#xff1a;同步技术用来解决多个并行任务之间的同步或通信问题。 通知器比较适合一对多的操作&#xff0c;类似于广播&#xff0c;一点发出的通知消息&#xff0c; 其它…...

编程日记 2024/8/10 13:00:17

Oracle一对多(一主多备)的DG环境如何进行switchover切换？

本文主要分享Oracle一对多(一主多备)的DG环境的switchover切换&#xff0c;如何进行主从切换&#xff0c;切换后怎么恢复正常同步&#xff1f; 1、环境说明 本文的环境为一主两备&#xff0c;数据库版本为11.2.0.4&#xff0c;主要信息如下&#xff1a; 数据库IPdb_unique_n…...

编程日记 2024/8/10 12:58:14

【浏览器插件】Chrome扩展V3版本

前言&#xff1a;Chrome从2022年6月开始&#xff0c;新发布插件只接受V3版。2024年V2版已从应用商店下架。 浏览器扩展插件开发API文档 chrome官网&#xff08;要翻墙&#xff09;&#xff1a; https://developer.chrome.com/docs/extensions/mv3 MDN中文&#xff1a;https:/…...

编程日记 2024/8/10 12:57:12

编码器信号干扰问题、编码器选型

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录 前言一、屏蔽技术1.静电屏蔽:2.低频磁屏蔽:3.电磁屏蔽:4.减少“天线” 二、增量编码器的信号选择三、信号电缆选择四、…...

编程日记 2024/8/10 12:56:10

Unity入门5——材质

创建材质 点击Assets → Create → Material&#xff0c;得到一个默认材质球的副本。 使用材质 直接把材质球拖拽到物体上&#xff0c;或设置mesh renderer组件下的Materials 数组中第一个元素...

编程日记 2024/8/10 12:55:08

C的温故而知新：存储类别、链接和内存管理（C Primer Plus第十二章）

存储类别、链接和内存管理 这一章主要涉及到的是一些偏概念的东西&#xff0c;基本上偏向于自己去理解这部分内容。很好地理解这一章可以更好地控制程序&#xff0c;合理的利用内存存储数据。 C语言提供了多种不同的模型或存储类别在内存中存储数据。作用域有块作用域、函数作…...

编程日记 2024/8/10 12:54:07

SpringBoot统一功能处理——统一数据返回格式

目录 一、简单使用 二、存在的问题描述 三、优点 一、简单使用 统一的数据返回格式使用 ControllerAdvice 和 ResponseBodyAdvice 的方式实现 ControllerAdvice 表示控制器通知类。 添加类 ResponseAdvice , 实现 ResponseBodyAdvice 接口&#xff0c;并在类上添加 …...

编程日记 2024/8/10 12:53:06

Milvus 实践(2) --- 2.4.x 安装，脚本分析，数据存储解析

目录 背景 Milvus2.4.x安装脚本分析 etcd组件 container_name image 参数 注意问题 environment volumes 实体化 command 参数 注意事项 healthcheck 参数 作用 下载 minio组件 container_name image 参数 注意事项 environment 参数 ports 参数 注…...

编程日记 2024/8/10 12:52:04

【蛋疼c++】千万别用std::wifstream读取Unicode UTF16文件

上当了。 最近程序要和 Jscript / activex 脚本通信。 ActiveX这玩意&#xff0c;导出文件&#xff0c;如果是UTF8导出&#xff0c;会出现莫名异常&#xff1a;写一半直接退出。或许是系统语言设置的问题。 但是切换为utf16&#xff08;unicode&#xff09;导出就没有问题&a…...

编程日记 2024/8/10 12:51:03

[算法] 第二集 二叉树中的深度搜索

深度优先遍历&#xff08;DFS&#xff0c;全称为 Depth First Traversal&#xff09;&#xff0c;是我们树或者图这样的数据结构中常⽤的 ⼀种遍历算法。这个算法会尽可能深的搜索树或者图的分支&#xff0c;直到⼀条路径上的所有节点都被遍历 完毕&#xff0c;然后再回溯到上…...

编程日记 2024/8/10 12:50:02

放弃使用外键时，sequelize 应该怎么使用？

在使用 Sequelize 时&#xff0c;如果想放弃使用外键&#xff0c;但仍然希望在模型之间建立关联&#xff0c;可以通过设置 constraints 选项为 false 来实现。这允许你定义模型之间的关系&#xff0c;而不在数据库中创建外键约束。以下是具体的实现步骤&#xff1a; 定义没有外…...

编程日记 2024/8/10 12:45:59

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/6/20 18:20:46

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/9/9 16:59:16

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/8/21 21:33:01

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/9/7 12:10:26

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/8/6 7:59:50

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/9/3 16:32:53

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/9/7 8:49:35

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/9/9 10:09:19

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/7/9 7:41:51

Vue 3 + WebSocket 实战：公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

编程新知 2025/7/6 16:42:10