Vue中的事件处理

news2025/1/12 0:02:34

一,基本使用

1.使用v-on:事件名或者@事件名绑定事件

常见的事件有:

onclick, 鼠标单击事件; ondblclick, 鼠标双击事件;onmousedown,鼠标按下去的事件;onmouseup,鼠标弹起事件;

onmouseover,onmouseenter,onmouseout,onmouseleaveonmousemove 监控鼠标的移入移出,以及移动事件

onkeydownonkeyuponkeypress 监控键盘的按下和弹起。

这里把on改为@即可

2.eg:@click="show"这样的写法默认会传一个事件的参数,如果写成@click="show(a)",这样就会把默认的事件参数取消掉,如果还想再把event参数传过去,就必须使用@click="show(a,$event)"才可以

二,常用的事件修饰符

.stop 阻止事件继续传播。

#阻止事件冒泡
<a @click.stop="toNext">前往下一页</a>

.stop 相当于在 toNext 方法上执行了 e.stopPropagation && e.cancelBubble = true;

.prevent 阻止标签的默认事件。

#阻止默认事件行为。
<a @click.prevent="toNext">

.prevent 相当于在 toNext 方法上执行了 e.preventDefault(),IE: e.returnValue = false;

.capture 添加事件监听器使用事件捕获模式,即处理顺序从body->目标元素。

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

.self 判断event.target是自己触发的,还是子元素冒泡过来的。.self就只接受自己触发的事件。

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

.once 表示点击事件只触发一次。

#vue版本2.1.0 点击事件将只会触发一次. <a v-on:click.once="doThis"></a>

三,按键事件的常用键

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/770289.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mybatis-plus逻辑删除与唯一约束冲突问题

问题描述&#xff1a; 在使用mybatis-plus进行数据库的增删查改的时候&#xff0c;我们一般都会设置用户名为唯一索引&#xff08;为什么&#xff1f;因为用户名肯定不能重复&#xff09; 当第一次新增用户时&#xff0c;会在数据库插入一条用户数据&#xff1a;能插入成功代…

计算机科学与技术专业课程内容汇总

大学课程结束了&#xff0c;真的好快。昨天把专业课程涉及到的内容汇总了下&#xff0c;还是挺多的&#xff0c;存到网盘里也不会丢&#xff0c;电脑存储空间还能扩大。 把网盘链接放在这里&#xff0c;希望大家共勉。图片中所涉内容仅为部分课程。 链接&#xff1a;https://…

Jmeter测试 Websocket服务器

目录 一、Jmeter 安装1.1 自定义 JMeter 的 JVM 设置 二、WebSocket插件安装三、环境准备3.1 连接数限制修改 四、测试4.1 脚本构建4.1.1 连接请求4.1.2 心跳4.1.3 WebSocket request-response Sampler4.1.4 WebSocket Single Write Sampler4.1.5 WebSocket Single Read Sample…

Mac配置CMake

目录 写在前面命令行安装安装包安装准备配置 参考完 写在前面 1、本文内容 Mac上配置CMake 2、平台 Mac 3、转载请注明出处&#xff1a; https://blog.csdn.net/qq_41102371/article/details/131807995 命令行安装 通过brew安装&#xff0c;先安装brew https://blog.csdn.n…

Sourcetree 同时推送两个仓库

Sourcetree 同时推送两个仓库 添加远端仓库添加完成推送推送完成git 命令版 添加远端仓库 注意名称不能相同 &#xff0c;自己取个名子区分一下&#xff0c;别把自己搞懵就行了。 添加完成 推送 选择仓库。选择目标分支。并勾选跟踪。推送。 推送完成 推送完成后&#xff0c;…

应用案例|探索高精度3D机器视觉在车间滑橇检测与测量中的应用

Part.1 应用行业 随着科技的不断进步&#xff0c;3D机器视觉技术逐渐成为了现实世界与数字世界之间的桥梁。3D机器视觉技术能使计算机感知和理解三维空间重的物体和场景&#xff0c;被广泛应用于机器人引导、工业检测等行业&#xff0c;例如&#xff1a;物流、电商、教育、医疗…

开发 SpringBoot 项目所用版本的选择

一、为什么要关注 springboot 的版本? 最开始做项目时候&#xff0c;组长说创建一个 springboot 2.5.4 的项目&#xff0c;mysql使用 5.6.X &#xff0c;maven使用是3.6.X。其实最开始我也没有多想&#xff0c;直接照做了&#xff0c;但是后面回想自己平时看到的SpringBoot开源…

【Win10系统下载Python3】

Python3官网&#xff1a;https://www.python.org/downloads/windows/ 注

谷歌Bard:ChatGPT之外的第三选择

2023年年初&#xff0c;为了对应ChatGPT方面的压力&#xff0c;谷歌Bard仓促上线&#xff0c;此后便进入了低调前行。目前为止已经迭代了9个版本&#xff0c;也就是在近期的版本更新中支持了中文&#xff08;简体/繁体&#xff09;语言&#xff0c;对国内用户可以说又友好了一步…

pytest入门介绍

目录 1、pytest是一个非常成熟的全功能的Python测试框架。 2、pytest安装 3、要求 4、运行 5、生成html报告 6、常见问题 1、pytest是一个非常成熟的全功能的Python测试框架。 主要有以下几个特点&#xff1a; 简单灵活&#xff0c;容易上手 支持参数化 能够支持简单的…

孩子没有身份证如何坐火车

既然写这个话题就有必要搞清楚&#xff0c;儿童多大是免票的。(儿童票怎么买&#xff0c;我们在买票的时候点击选择乘车人&#xff0c;左侧是添加乘车人右侧是添加随行儿童) 如果你有12306app 点击app -> 点击我的 -> 点击使用须知 -> 点击常见问题 上面的有效证件…

配置需求分类中的科目分配

其中科目分配的内容都为灰色无法修改 结果是在科目分配里面单独维护的&#xff1a; 路径&#xff1a;销售分销-基本功能-科目分配/成本-维护成本科目分配的需求类别

three.js学习(基础)

目录 前言&#xff1a; 参考文档&#xff1a; 实现 1、安装 2、声明 3、引入使用 前言&#xff1a; 前面学习了three.js物体的动画展示&#xff0c;接下来学习应用图形界面更改变量 目标、页面提供操作区域进行变量修改 参考文档&#xff1a; dat.gui - npmA lightwe…

韦东山Linux驱动入门实验班(4)LED驱动

前言 &#xff08;1&#xff09;我们学习完hello驱动之后&#xff0c;对驱动程序开发有了一点点认识了之后。现在可以开始对硬件进行实际操作了&#xff0c;本人使用的是i.max6ull开发板&#xff0c;STM32MP157和全志的D1H也会进行讲解。 &#xff08;2&#xff09;如果还有对于…

ubuntu 设置系统时间矫正

1、安装ntpdate&#xff0c;同步标准时间 2、修改时区 3、在.profile文件中写入上面提示的信息&#xff0c;保存退出、更新配置文件或者重启生效 3.1、或者配合上面的cp那条命令&#xff0c;用下面的命令保存到底层 $ hwclock --systohc 4、重启之后&#xff0c;查看日期时间已…

【动手学深度学习】--14.网络中的网络 NiN

文章目录 网络中的网络 NiN1.NiN块1.2NiN架构1.3NiN模型1.4训练模型 网络中的网络 NiN 学习视频&#xff1a;网络中的网络 NiN【动手学深度学习v2】 官方笔记&#xff1a;网络中的网络&#xff08;NiN&#xff09; 全连接层的问题 LeNet、AlexNet和VGG都有一个共同的设计模式…

如果微信消息显示“已读”的话......

近日&#xff0c;一则 #如果微信显示已读的话# 话题冲上了微博热搜榜单。 “已读”是很多社交软件拥有的功能&#xff0c;如果对方接收并查看了消息&#xff0c;就会在消息上显示“已读”&#xff0c;但目前微信还没有推出这项功能。 对于“已读”功能&#xff0c;不少网友纷纷…

推荐一款在win、mac、android之间传递文件或消息的软件,LocalSend,前提需要在同一网络下

官方地址 https://github.com/localsend/localsend/releases/download/v1.10.0/LocalSend-1.10.0.dmg 可选择不同的设备进行发送接收&#xff0c;超级好用

我又被文章版权碰瓷公司起诉了:索赔10000元

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 事情是这样的&#xff0c;昨天我正在上班摸鱼&#xff0c;突然收到一个从新疆乌鲁木齐打来的电话。我本不想接&#xff0c;以为又是广告骚扰电话&#xff0c;结果突然弹出一条短信&#xff0c;说是…

Ceph 分布式存储之应用

一、创建 CephFS 文件系统 MDS 接口 1、服务端操作 1&#xff09;在管理节点创建 mds 服务 [rootadmin ceph]# cd /etc/ceph [rootadmin ceph]# ceph-deploy mds create node01 node02 node03 [ceph_deploy.conf][DEBUG ] found configuration file at: /root/.cephdeploy.c…