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

Vue2学习笔记（事件处理）

news 文章来源：https://blog.csdn.net/weixin_47401101/article/details/134722430 2024/11/20 10:45:59

一、基本使用

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；2.事件的回调需要配置在methods对象中，最终会在vm上；3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数据绑定</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h1>欢迎来到{{name}}学习！</h1><button v-on:click="showInfo1">点我弹出提示信息1</button><!--@符号可以代替v-on:--><button @click="showInfo2(66,$event)">点我弹出提示信息2</button>  </div>
</body>
<script type="text/javascript">const vm = new Vue({el:"#root",data:{name:"菜鸟教程"},methods:{showInfo1(event){alert("同学你好啊！")},showInfo2(number,event){alert("同学你好啊！!!")}}})</script>
</html>

二、事件修饰符

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；       

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>事件修饰符</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: skyblue;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style></head><body><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><!-- 阻止默认事件（常用） --><a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡（常用） --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button><!-- 修饰符可以连续写 --><!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> --></div><!-- 事件只触发一次（常用） --><button @click.once="showInfo">点我提示信息</button><!-- 使用事件的捕获模式 --><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件； --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； --><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'尚硅谷'},methods:{showInfo(e){alert('同学你好！')// console.log(e.target)},showMsg(msg){console.log(msg)},demo(){for (let i = 0; i < 100000; i++) {console.log('#')}console.log('累坏了')}}})</script>
</html>

三、 键盘事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>键盘事件</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 1.Vue中常用的按键别名：回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊，必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。(2).配合keydown使用：正常触发事件。4.也可以使用keyCode去指定具体的按键（不推荐）5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名--><!-- 准备好一个容器--><div id="root"><h2>欢迎来到{{name}}学习</h2><input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。Vue.config.keyCodes.huiche = 13 //定义了一个别名按键new Vue({el:'#root',data:{name:'尚硅谷'},methods: {showInfo(e){// console.log(e.key,e.keyCode)console.log(e.target.value)}},})</script>
</html>

相关文章：

Vue2学习笔记（事件处理）

一、基本使用 1.使用v-on:xxx 或 xxx 绑定事件&#xff0c;其中xxx是事件名&#xff1b;2.事件的回调需要配置在methods对象中&#xff0c;最终会在vm上&#xff1b;3.methods中配置的函数&#xff0c;不要用箭头函数&#xff01;否则this就不是vm了&#xff1b;4.methods中配…...

编程日记 2023/12/4 21:58:35

【2023第十二届“认证杯”数学中国数学建模国际赛】A题 太阳黑子预报完整解题思路

A题 太阳黑子预报 题目任务思路分析第一问第二问第三问 题目 太阳黑子是太阳光球上的一种现象&#xff0c;表现为比周围区域更暗的临时斑点。它们是由于磁通量集中而导致表面温度降低的区域&#xff0c;磁通量的集中抑制了对流。太阳黑子出现在活跃区域内&#xff0c;通常成对…...

编程日记 2023/12/4 21:57:34

Huawei FusionSphere FusionCompte FusionManager

什么是FusionSphere FusionSphere 解决方案不独立发布软件&#xff0c;由各配套部件发布&#xff0c;请参 《FusionSphere_V100R005C10U1_版本配套表_01》。 目前我们主要讨论FusionManager和FusionCompute两个组件。 什么是FusionCompte FusionCompute是华为提供的虚拟化软…...

编程日记 2023/12/4 21:56:33

GSLB是什么？谈谈对该技术的一点理解

GSLB是什么&#xff1f;它又称为全局负载均衡&#xff0c;是主流的负载均衡类型之一。众所周知&#xff0c;负载均衡位于服务器的前面&#xff0c;负责将客户端请求路由到所有能够满足这些请求的服务器&#xff0c;同时最大限度地提高速度和资源利用率&#xff0c;并确保无任何…...

编程日记 2023/12/4 21:54:31

【接口测试】POST请求提交数据的三种方式及Postman实现

1. 什么是POST请求&#xff1f; POST请求是HTPP协议中一种常用的请求方法&#xff0c;它的使用场景是向客户端向服务器提交数据&#xff0c;比如登录、注册、添加等场景。另一种常用的请求方法是GET&#xff0c;它的使用场景是向服务器获取数据。 2. POST请求提交数据的常见编…...

编程日记 2023/12/4 21:50:27

SpringBoot系列之集成Jedis教程

SpringBoot系列之集成Jedis教程&#xff0c;Jedis是老牌的redis客户端框架&#xff0c;提供了比较齐全的redis使用命令&#xff0c;是一款开源的Java 客户端框架&#xff0c;本文使用Jedis3.1.0加上Springboot2.0&#xff0c;配合spring-boot-starter-data-redis使用&#xff0…...

编程日记 2023/12/4 21:49:26

centos用什么命令可查看版本号

概述 查版本号的命令&#xff1a;1、“cat /etc/redhat-release”&#xff0c;可输出centos版本号&#xff1b;2、“cat /proc/version”、“uname -a”或“uname -r”&#xff0c;可输出内核版本号。 本教程操作环境&#xff1a;centos7.9.2009系统。 查看centos版本 [roo…...

编程日记 2023/12/4 21:47:24

大数据之Redis

NoSQL SQL数据库泛指关系型数据库NoSQL不拘泥于关系型数据的设计范式&#xff0c;放弃了通用的技术标准&#xff0c;为某一特定领域场景而设计 NoSQL的特点 不遵循SQL标准不支持ACID远超SQL的性能 NoSQL的适用场景 对数据高并发的读写海量数据的读写对数据高可扩展性的 N…...

编程日记 2023/12/4 21:45:22

【React设计】React企业级设计模式

Image Source : https://bugfender.com React是一个强大的JavaScript库&#xff0c;用于构建用户界面。其基于组件的体系结构和构建可重用组件的能力使其成为许多企业级应用程序的首选。然而&#xff0c;随着应用程序的规模和复杂性的增长&#xff0c;维护和扩展变得更加困难。…...

编程日记 2023/12/4 21:42:20

赴日程序员高年薪过上“躺平”生活？

日本的IT行业想要达到的高薪&#xff0c;也是需要很多资历和经验的&#xff0c;不过即使你是新卒&#xff0c;也能拿到相比国内来说让你满意的薪资。 刚入职的起薪是20-23万日元/月&#xff0c;情报信息业出身&#xff0c;技术掌握不错&#xff0c;起薪是25万-30万日元。之后经…...

编程日记 2023/12/4 21:41:19

Windows开启SQL Server服及1433端口

需求&#xff1a;Windows开启SQL Server服务及1433端口 目前端口没有启动 解决&#xff1a; 打开SQL Server配置管理器&#xff08;winR&#xff09; 各个sqlserver版本在textbox中输入对应的命令如下&#xff1a; SQLServerManager15.msc&#xff08;对于 SQL Server 2019 &am…...

编程日记 2023/12/4 21:40:18

网盘系统设计：万亿 GB 网盘如何实现秒传与限速？

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 网盘&#xff0c;又称云盘&#xff0c;是提供文件托管和文件上传、下载服务的网站&#xff08;File hostingservice&#xff09;。人们通过网盘保管自己拍摄的照片、视频&#xff0c;通过网盘和他人共享文件&#xff…...

编程日记 2023/12/4 21:35:12

整数和浮点数在内存中的存储

文章目录 每日一言整数在内存中的存储方式浮点数在内存中的存储结语 每日一言 You just can’t beat the person who never gives up. 你无法打败那位永不放弃的人。 整数在内存中的存储方式 整数在内存中的存储方式通常采用二进制形式&#xff0c;即将整数的数值转化为二进制…...

编程日记 2023/12/4 21:30:08

rabbitMQ镜像队列的使用

在rabbitMQ集群中&#xff0c;默认发送消息时&#xff0c;队列默认时在一个节点上存在的。 我们以node01 node02 node03三节点集群为例&#xff0c;在node01声明队列发送消息后&#xff0c;发现&#xff1a; 测试队列只在节点node01上出现。 我们手动停止node01后&#xff0c…...

编程日记 2023/12/4 21:29:07

ros来保存图像和保存记录视频的方法---gmsl相机保存视频和图片

1，保存图片 rosrun image_view image_view image:=/myimg_topic这个命令只是用来查看图像的，它并不会保存图像。如果你想要保存图像，你需要使用image_saver节点，并指定保存路径。例如： 下面指令就可以了，可以用 rosrun image_view image_saver image:=/myimg_topic _fi…...

编程日记 2023/12/4 21:26:05

Oracle19c使用adrci清理日志文件

Oracle中通常有好多日志文件&#xff0c;遇到异常情况会产生大量日志&#xff0c;造成磁盘空间紧张。 故需要清理对应文件。包括trace文件&#xff0c;incident文件&#xff0c;listener log文件等。 19c中oracle提供了一个ADRCI的命令行工具来查看ADR中的alert日志和trace信息…...

编程日记 2023/12/4 21:23:02

Ubuntu之Sim2Real环境配置（坑居多）

不要一上来就复制哦&#xff0c;因为很多下面的步骤让我走了很多弯路&#xff0c;如果可能的话&#xff0c;我会重新整理再发出来 前提&#xff1a; 参考教程 Docs 创建工作空间(不用跟着操作&#xff0c;无用&#xff09; 1.创建sim2real server container 1.尝试创建sim2r…...

编程日记 2023/12/4 21:22:01

java中BigDecimal里面的subtract函数的意思？

在Java中&#xff0c;BigDecimal类提供了一个名为subtract()的函数&#xff0c;用于执行两个BigDecimal对象的减法操作。该函数返回一个新的BigDecimal对象&#xff0c;表示两个操作数相减的结果。 下面是BigDecimal.subtract()函数的用法示例&#xff1a; java Copy code im…...

编程日记 2023/12/4 21:21:00

线程变量引发的session混乱问题

最近不是在救火&#xff0c;就是在救火的路上。 也没什么特别可写的&#xff0c;今天记录下最近遇到的一个问题&#xff0c;个人觉得挺有意思&#xff0c; 待有缘人阅读 言归正传&#xff0c;售后反馈&#xff1a; 营业查询中付款方式为第三方支付的几条银行缴费&#xff0c;创…...

编程日记 2023/12/4 21:19:59

dockerfile与docker-compose解释及对比

Dockerfile 是一个文本文件&#xff0c;用于定义单个Docker镜像的构建过程和配置。它包含了一系列的指令&#xff0c;如FROM、RUN、COPY、CMD等&#xff0c;按照顺序执行这些指令来构建镜像。Dockerfile可以定义容器的基础镜像、安装依赖软件、拷贝文件、运行命令等操作。通过…...

编程日记 2023/12/4 21:18:58

数据库更换版本

目录 0.前言 1.官网下载MySQL 2.配置初始化文件my.ini 3.初始化MySQL 4.安装mysql服务并启动修改密码 5.配置环境变量​编辑 0.前言 心累&#xff0c;为了完成实验&#xff0c;必须使用8.0版本导致我更新版本的时候&#xff0c;把sqlyog干崩溃了&#xff0c;什么版本不兼…...

编程日记 2023/12/4 21:16:56

Unity Meta Quest 一体机开发（九）：【手势追踪】通过录制抓取手势实现自定义抓取姿势

文章目录 &#x1f4d5;教程说明&#x1f4d5;录制前的准备&#x1f4d5;第一种录制方法&#xff08;Hand Grab Pose Tool 场景&#xff09;⭐在运行模式中确认录制⭐保存录制的手势&#xff0c;将物体做成 Prefab⭐在编辑阶段调整抓取手势&#x1f50d;Fingers Freedom&#x…...

编程日记 2023/12/4 21:15:55

Git 简介及异常场景处理

一、简介 介绍Git之前&#xff0c;还得先介绍下 版本控制系统&#xff08;VCS&#xff09;&#xff0c; 和它的发展历史 纵观版本控制系统的发展历史&#xff0c;广义上讲&#xff0c;版本控制工具的历史可以分为三代&#xff1a; 第一代 第一代版本控制系统被称为本地版本控…...

编程日记 2023/12/4 21:13:53

龙迅LT2611UX 四端口LVDS转HDMI（2.0）

1.描述&#xff1a; LT2611UX 四端口LVDS TO HDMI2.0。 LT2611UX是一款高性能得LVDS到HDMI2.0转换器得STB&#xff0c;DVD应用程序&#xff0c;LVDS输入可以配置单端口&#xff0c;双端口或者四端口&#xff0c;带有一个高速时钟通道&#xff0c;最多可运行三到四个高速数据…...

编程日记 2023/12/4 21:12:52

MySQL基础『数据类型』

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; MySQL 学习 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 &#x1f381;软件版本&#xff1a; MySQL 5.7.44 文章目录 1.数据类型一览2.整型2.1.INT2.2.BIT 3.浮点数3.1.FLOAT3.2.DECIMAL3…...

编程日记 2023/12/4 21:10:49

SQL手工注入漏洞测试(PostgreSQL数据库)-墨者

———靶场专栏——— 声明&#xff1a;文章由作者weoptions学习或练习过程中的步骤及思路&#xff0c;非正式答案&#xff0c;仅供学习和参考。 靶场背景&#xff1a; 来源&#xff1a; 墨者学院 简介&#xff1a; 安全工程师"墨者"最近在练习SQL手工注入漏洞&#…...

编程日记 2023/12/4 21:08:48

STM32单片机项目实例：基于TouchGFX的智能手表设计（1）项目介绍及GUI界面基础

STM32单片机项目实例&#xff1a;基于TouchGFX的智能手表设计&#xff08;1&#xff09;项目介绍及GUI界面基础 一、项目介绍 1.1方案提供 1.2主控选择 1.3硬件平台 1.4 开发环境 1.5 关于华清 二、GUI界面基础 2.1.1 嵌入式绘图系统 2.1.1 色彩格式 2.1.1帧缓冲区 …...

编程日记 2023/12/4 21:07:46

【超详细教程】基于html+js实现轮播图

轮播图是现代网页设计中常见的元素之一&#xff0c;它能够展示多张图片或内容&#xff0c;在有限的空间内循环播放&#xff0c;提升网页的视觉效果和用户体验。下面将以一个简单的网页轮播图为例&#xff0c;说明如何基于HTML和JavaScript实现。 ​ 1、R5Ai智能助手 chatgpt国…...

编程日记 2023/12/4 21:04:43

C++11(上)

统一的列表初始化 首先要说明&#xff1a; 这个列表初始化和类和对象那里的初始化列表不是一个概念. {} 初始化 在C98中, 标准允许使用花括号{}对数组或者结构体元素进行统一的列表初始值设定. 比如: C语言里面其实就是这样支持的, 所以可以认为C支持这样就是因为要兼容C. 在…...

编程日记 2023/12/4 21:03:42

web前端开发规范、HTML规范、JavaScript规范、style规范

MENU 前言目的 HTML规范用法规范注释规范 CSS规范用法规范书写顺序样式覆盖注释规范 JavaScript规范用法规范组件选项注释规范 命名规范目录命名图片命名文件命名方法命名样式命名常用词 工程结构目录构建代码风格 Git规范分支说明使用说明 相关连接 前言 目的 规范的目的是为…...

编程日记 2023/12/4 21:01:41

高校二级网站建设方案/推广找客户平台

今天来谈一下华为的防火墙6000v的一个web登录的问题。一般来说图形界面是比较友好的&#xff0c;也好理解。有时候我们可以给网络管理员部分权限&#xff0c;让他用另外一个用户名进行登录。类似于电脑操作系统的用户角色。我们可以新建一个角色&#xff0c;给这个角色分配权限…...

编程日记 2024/11/20 10:35:31

天津网站制作福州/怎么自己做一个网址

如果你有一个自定义的属性 "CompanyId" 在你的 AppSession 类之中&#xff0c;如果你想要获取这个属性等于某值的 的所有 Session&#xff0c; 你可以使用 AppServer 的方法 GetSessions(...): var sessions appServer.GetSessions(s > s.CompanyId companyId);…...

编程日记 2024/11/20 7:59:42

教做3d的网站/百度爱采购官网首页

用yum update 更新的时候&#xff0c;它会更新到当前系列的最新的版本&#xff0c; 比如当前系统版本是centos7.2&#xff0c;而假设centos7系列当前最新版为7.6&#xff0c;那么就会更新到7.6&#xff0c;如果当前最新版本是7.9&#xff0c;则会更新到7.9&#xff0c;而不会更…...

编程日记 2024/11/20 7:37:27

工作室做网站/西安网站建设公司十强

机载计算机电源系统的过压保护电路VICOR电源的DC/DC变换器都是固定输出模式&#xff0c;但为了方便用户&#xff0c;又设置了输出电压调节端。当输出电流较大&#xff0c;传输线路较长时&#xff0c;为弥补线路上的压降&#xff0c;需要将输出电压调高。如某电子组件的&#xf…...

编程日记 2024/11/20 4:48:47

wordpress分页目录编辑/互动营销名词解释

首先&#xff0c; equality 等同&#xff0c; identity 恒等。&#xff0c; 两边值类型不同的时候&#xff0c;要先进行类型转换&#xff0c;再比较。&#xff0c;不做类型转换&#xff0c;类型不同的一定不等。下面分别说明&#xff1a;先说 &#xff0c;这个比较简单。下面的…...

编程日记 2024/11/20 4:29:08

网站制作怎么做语音搜索框/google app下载

最新版 Docker 安装 Nginx1、在Docker中查询Nginx2、选择最新版本安装3、查询Docker容器中的镜像4、启动Nginx5、查询是否启动Nginx镜像6、停止Nginx7、删除Nginx容器1、在Docker中查询Nginx [rootshiqi /]# docker search nginx #查询结果 NAME …...

编程日记 2024/11/20 3:48:15