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

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

news 2025/11/10 13:02:21

目录

  • 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

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/11/9 3:46:18

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/7/9 17:20:48

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/11/8 8:17:50

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/11/9 15:37:23

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/11/7 21:07:26

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2025/11/9 13:32:42