Vue中的事件处理

一,基本使用

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>

三,按键事件的常用键

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【代码随想录 | Leetcode | 第六天】链表 | 反转链表 | 两两交换链表中的节点 | 删除链表的倒数第 N 个结点

前言 欢迎来到小K的Leetcode|代码随想录|专题化专栏&#xff0c;今天将为大家带来反转链表、两两交换链表中的节点和删除链表的倒数第N个节点的分享✨ 目录 前言206. 反转链表24. 两两交换链表中的节点19. 删除链表的倒数第 N 个结点总结 206. 反转链表 ✨题目链接点这里 给你…

【蓝图】p27开关门互动实现

p27开关门互动实现 创建一个门 添加初学者内容包 拖拽一个门到场景中 添加一个碰撞 创建盒体触发器 左侧模式->基础->盒体触发器&#xff0c;拖拽到门上&#xff0c;调整大小 开关门互动实现 做一个开门互动 要把开门逻辑写在关卡蓝图里 门设置为可移动 打开关卡蓝…

MySQL-DDL-表的结构-查询修改删除

DDL&#xff08;表操作&#xff09; 查询 查询当前数据库所有表&#xff1a;show tables 查询表结构&#xff1a;desc 表名 查询建表语句&#xff1a;show create table 表名 修改&#xff08;主要还是通过图形化界面进行操作&#xff09; 添加字段&#xff1a;alter table …

LayUi之手风琴的趣味案例

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于LayUi的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.手风琴是什么 二.手风琴在什么时候使用…

业务开发“银弹” ——低代码开发平台

一、现状 低代码开发平台要让每个人&#xff0c;包括开发者和普通业务人员&#xff0c;都能够成为企业数字化过程中的主导者和构建者&#xff01;让普通人更容易上手&#xff01; 基于这一目标&#xff0c;应用需求多的云服务商成为低代码投资的主要来源。一家云服务商如谷歌云…

AD从原理图到PCB超详细教程

AD超详细教程 前言一、建立一个工程模板二、原理图1.设计原理图。2.使用AD自带库和网上开源原理图库3.画原理图库4.编译原理图 三、PCB1.确定元器件尺寸大小2.绘制PCB Library①使用元器件向导绘制元件库②原理图与PCB的映射 3.绘制PCB①更新PCB②调整元件位置③布线④漏线检查…

代理模式【静态代理和动态代理实现业务功能扩展】

静态代理 我们在不修改业务的情况下想要给它增加一些功能&#xff0c;这就需要使用代理模式。我们不会在原有业务上直接修改&#xff0c;为了避免修改导致程序不可逆转的破坏。三种角色&#xff1a;抽象角色-接口、真实角色-实现类和代理角色-代理类。真实角色和代理角色继承的…

raid5故障导致上层文件系统不可用的服务器数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器上有两组分别由4块SAS硬盘组建的raid5磁盘阵列&#xff0c;这两组raid5阵列划分LUN并组成LVM结构&#xff0c;格式化为EXT3文件系统。 服务器故障&#xff1a; 一组raid5阵列上的一块硬盘未知原因离线&#xff0c;热备盘上线替换离线…

Redis远程字典服务

目录 前言 1.NoSQL 1.1NOSQL和关系型数据库比较 1.2非关系型数据库的优势 1.3关系型数据库的优势 ​编辑 2.主流的NOSQL产品 键值(Key-Value)存储数据库 列存储数据库 文档型数据库 图形(Graph)数据库 3.Redis简介 redis的应用场景 4.命令操作 4.1字符串类型 s…

Linux内核的任务:

硬件与软件之间的中间层&#xff1a;内核在技术层面上充当硬件和软件之间的中间层&#xff0c;负责将应用程序的请求传递给硬件&#xff0c;并处理硬件设备和组件的寻址和操作。 应用程序的接口&#xff1a;对于应用程序来说&#xff0c;内核是它们与硬件之间的接口。应用程序通…

vscode 端口转发实现端口映射,实现端口自由

用vscode连接server进行开发&#xff0c; 是非常方便的&#xff0c;但很多时候&#xff0c;server的端口开放的很有限&#xff0c;那么就可以利用vscode进行端口映射 举一个应用场景&#xff1a; 先通过A利用vscode 连接B&#xff0c;然后再vscode 的port窗口进行端口转发&…

每日一刷——替换空格

题目描述&#xff1a; 请实现一个函数&#xff0c;将一个字符串中的每个空格替换成“%20”。例如&#xff0c;当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。 我的思路&#xff1a;从左向右循环遍历字符串&#xff0c;定义一个空串。如果遇到空格&#xf…

【广州华锐互动】VR地铁消防逃生路线演练系统

随着城市轨道交通的不断发展&#xff0c;事故应急演练的重要性也越来越受到重视。而VR技术的应用&#xff0c;为地铁消防逃生路线演练带来了许多亮点&#xff0c;包括以下几个方面&#xff1a; 首先&#xff0c;VR技术可以提供高度真实的模拟场景。在传统的事故应急演练中&…

Lottie源代码解析

Lottie-iOS Lottie动画的原理&#xff1a; 一个完整动画View&#xff0c;是由很多个子Layer 组成&#xff0c;而每个子Layer主要通过shapes&#xff08;形状&#xff09;&#xff0c;masks&#xff08;蒙版&#xff09;&#xff0c;transform三大部分进行动画。Lottie框架通过…

【Linux】内存使用相关

free 命令 查看内存大小 free -g :G单位 free -h : 可读性较高较理解 free -m : MB单位 total: 总内存used: 正在运行的进程使用的内存(used total – free – buff/cache)free: 未使用的内存 (free total – used – buff/cache)shared: 多个进程共享的内存buffers: 内存保留…

linux安装mysql以及使用navicat连接mysql

目录 一、下载mysql 二、安装mysql 三、使用Navicat连接MySQL 四、常见问题 1、启动服务时报错 Failed to start mysql.service: Unit not found. 的解决方法。 2、登录过程出现&#xff1a;access denied for user’root’‘localhost’(using password:Yes) 的解决方…

常见的网络攻击

​ 1.僵木蠕毒 攻击业内习惯把僵尸网络、木马、蠕虫、感染型病毒合称为僵木蠕毒。从攻击路径来看&#xff0c;蠕虫和感染型病毒通过自身的能力进行主动传播&#xff0c;木马则需要渠道来进行投放&#xff0c;而由后门木马&#xff08;部分具备蠕虫或感染传播能力&#xff09;构…

一本通1919:【02NOIP普及组】选数

这道题感觉很好玩。 正文&#xff1a; 先放题目&#xff1a; 信息学奥赛一本通&#xff08;C版&#xff09;在线评测系统 (ssoier.cn)http://ybt.ssoier.cn:8088/problem_show.php?pid1919 描述 已知 n 个整数 x1,x2,…,xn&#xff0c;以及一个整数 k&#xff08;k&#…

Flutter——最详细(NavigationRail)使用教程

NavigationRail 简介 一个 Material Design 小部件&#xff0c;旨在显示在应用程序的左侧或右侧&#xff0c;以便在少量视图&#xff08;通常在三到五个视图之间&#xff09;之间导航。 使用场景&#xff1a; 通过Row属性&#xff0c;左侧或右侧菜单栏按钮 属性作用onDestinati…

Excel之VLOOKUP()函数介绍

Excel之VLOOKUP()函数介绍 Excel的VLOOKUP函数语法&#xff1a; VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup]) 参数说明&#xff1a; lookup_value&#xff1a;要查找的值或要比较的值。 table_array&#xff1a;包含要在其中进行查找的数据表的区…