【Vue】二:Vue核心处理---事件处理

文章目录

  • 1. 事件修饰符
    • 1.1 prevent
    • 1.2 stop
    • 1.3 capture - 添加事件侦听器时使用 capture 模式。
    • 1.4 self
    • 1.5 one
    • 1.6 passive
  • 2.按键修饰符
  • 3.系统修饰符

1. 事件修饰符

1.1 prevent

在这里插入图片描述
当我们点击后,回去先执行关联的事件,然后再去执行默认行为,即跳转。

在这里插入图片描述
在这里插入图片描述
如果我们想要阻止浏览器的默认行为,我们可以使用如下的两个方法。其中方法一是使用事件修饰符。
在这里插入图片描述

1.2 stop

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
当我们使用stop后,事件停止冒泡。

1.3 capture - 添加事件侦听器时使用 capture 模式。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
关于DOM事件流:(网上的一个介绍)
在这里插入图片描述

1.4 self

如果是我自己元素上的事件,则执行,如果是被人传递给我的事件,则不执行。

1.5 one

事件只发生一次。

1.6 passive

直接继续执行事件的默认行为。

2.按键修饰符

(1) .enter
(2) .tab (只能配合 keydown 使用)
(3) .delete (捕获“删除”和“退格”键)
(4) .esc
(5) .space
(6) .up
(7) .down
(8) .left
(9) .right

例如:

<input type="text" @keyup.enter="getInfo">

3.系统修饰符

(1) .ctrl
(2) .alt
(3) .shift
(4) .meta
使用

<input type="text" @keyup.ctrl.c="getInfo"/>

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

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

相关文章

本地电脑部署微力同步私人网盘,端口映射实现远程访问

文章目录 1.前言2. 微力同步网站搭建2.1 微力同步下载和安装2.2 微力同步网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 转发自CSDN远程穿透的文章&#xff1a;轻NAS搭建 - 使用微力同步搭建私人云盘&#xff0c…

spark安装

安装 su - root https://repo.anaconda.com/archive/ Anaconda3-2021.05-Linux-x86_64.sh sh ./Anaconda3-2021.05-Linux-x86_64.sh yes enter exit() exit() 重新登录 su - root 配置成功 (base) [rootnode1 ~]# python Python 3.8.8 (default, Apr 13 2021, 19:58:26) [GC…

CentOS 7安装redis

一、概述 1、redis介绍 Redis 全称 Remote Dictionary Server&#xff08;即远程字典服务&#xff09;&#xff0c;它是一个基于内存实现的键值型非关系&#xff08;NoSQL&#xff09;数据库 2、redis的特点 支持数据持久化 redis支持数据的持久化&#xff0c;可以将内存中的…

Java前缀和算法

一.什么是前缀和算法 通俗来讲&#xff0c;前缀和算法就是使用一个新数组来储存原数组中前n-1个元素的和&#xff08;如果新数组的当前元素的下标为n&#xff0c;计算当前元素的值为原数组中从0到n-1下标数组元素的和&#xff09;&#xff0c;可能这样讲起来有点抽象&#xff0…

UCIe技术——概览索引

一、Chiplet技术概述 chiplet技术顺应了芯片生产与集成技术发展的趋势&#xff0c;也开拓了半导体技术发展的新的发展方向&#xff0c;将创造出一种新的芯片设计和商业模式 1.1 芯片生产与集成技术发展的趋势 &#xff08;1&#xff09;低半径高带宽的物理连线(bandwidth / …

css定位模式

1. 为什么需要定位&#xff1f; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"…

【python资料】pandas的条件查询

一、说明 在使用Pandas的DataFrame进行数据挖掘的时候&#xff0c;需要形形色色的条件查询&#xff0c;但是这些查询的基本语法是啥&#xff0c;查询的灵活性如何&#xff0c;本文将对他们进行详细列出&#xff0c;便于以后查阅。 二、Pandas条件查询方法 2.1 简单条件查询 1、…

单视觉L2市场「鲶鱼」来了,掀起数据反哺高阶新打法

作者 | 张祥威编辑 | 德新 智驾方案的降本行动仍在推进。 早年&#xff0c;单视觉L2市场的玩家以Mobileye、博世为主&#xff0c;后来国内智驾公司加入&#xff0c;共同推动 1V、1R1V、nR1V等不同的方案兴起&#xff0c;L2近乎成为车辆的必备功能。 当下&#xff0c;在行业降低…

SpringBoot启动扩展应用:干预优化+加快启动时间

目录 一、SpringBoot启动配置原理简述 二、SpringBoot启动过程干预 &#xff08;一&#xff09;ApplicationContextInitializer扩展 修改Spring Boot默认的environment属性 添加自定义的PropertySource 注册自定义bean &#xff08;二&#xff09;SpringApplicationRunL…

Vue绑定class样式与style样式

1&#xff0c;回顾HTML的class属性 答&#xff1a;任何一个HTML标签都能够具有class属性&#xff0c;这个属性可能只有一个值&#xff0c;如class"happs"&#xff0c;也有可能存在多个属性值&#xff0c;如class"happs good blue"&#xff0c;js的原生DOM针…

KDZK-F水轮发电机转子测试仪

一、产品概述 KDZK-F水轮发电机转子测试仪是判断发电机转子绕组有无匝间短路的专用仪器&#xff0c;可以自动、手动&#xff08;单向或双向&#xff09;测量转子绕组的电压、电流、阻抗、功率、相位角等参数。 二、功能与特点 旋转鼠标&#xff0c;操作更方便。 可选择快速的…

【014】C++数组之一维字符数组和二维字符数组

C数组之一维字符数组和二维字符数组 引言一、一维字符数组1.1、一维字符数组的初始化1.2、字符数组的遍历1.3、从键盘获取字符串1.4、使用示例 二、二维字符数组2.1、定义2.2、初始化2.3、访问 总结 引言 &#x1f4a1; 作者简介&#xff1a;专注于C/C高性能程序设计和开发&…

结构体 --- C语言

目录 1.结构体的声明 2.结构体变量的定义和初始化 3.结构体成员访问 4.结构体传参 1.结构体的声明 结构是一些值的集合&#xff0c;这些称为成员变量&#xff0c;结构的每个成员可以是不同类型的变量。 而数组是一组类型相同的元素的集合。 生活中的描述 人&#xff1a;名…

伪类元素的用法总结

1:自闭标签不适用伪类元素 自闭合标签 1. 一般标签   由于有开始符号和结束符号&#xff0c;因此可以在内部插入其他标签或文字。 <p>“绿叶&#xff0c;给你初恋般的感觉。”</p> 2. 自闭合标签   由于只有开始符号而没有结束符号&#xff0c;因此不可以在内…

亚马逊云科技宣布全面推出Amazon Aurora I/O-Optimized集群配置

自亚马逊云科技Amazon Aurora于2014年推出以来&#xff0c;成千上万的客户选择Aurora来运行其要求最严苛的应用程序。Aurora在全球范围内提供无与伦比的高性能和可用性&#xff0c;完全兼容MySQL和PostgreSQL&#xff0c;成本仅为商用数据库的十分之一。 许多亚马逊云科技客户受…

C# 队列(Queue)

目录 一、概述 二、基本的用法 1.添加元素 2.取出元素 1&#xff09;Dequeue 方法 2&#xff09;Peek 方法 3.判断元素是否存在 4.获取队列的长度 5.遍历队列 6.清空容器 7.Queue 泛型类 三、结束 一、概述 表示对象的先进先出集合。 队列和其他的数据结构一样&a…

微服务解码:揭示API的优势挑战与最佳实践

在当今快节奏的软件开发环境中&#xff0c;微服务已成为一种流行的架构模式。但微服务到底是什么&#xff1f;简而言之&#xff0c;微服务是一种将应用程序构建为松耦合、细粒度服务集合的方式&#xff0c;这些服务通过轻量级协议进行通信。这种架构风格使团队能够独立开发和部…

es Elasticsearch 六 java api spirngboot 集成es

目录 Java restApi Springboot 集成es 新增-同步 新增-异步 增删改查流程 _bulk 批量操作 Java restApi Springboot 集成es 新增-同步 Testpublic void te2() throws IOException {System.out.println(1);IndexRequest ir new IndexRequest("test");ir.id(&qu…

边缘计算AI硬件智能分析网关V1版的接入流程与使用步骤

我们的AI边缘计算网关硬件——智能分析网关目前有两个版本&#xff1a;V1版与V2版&#xff0c;两个版本都能实现对监控视频的智能识别和分析&#xff0c;支持抓拍、记录、告警等&#xff0c;在AI算法的种类上和视频接入上&#xff0c;两个版本存在些许的区别。V1的基础算法有人…

独立站怎么搭建?搭建一个独立站的10个建议和步骤

要搭建一个独立站&#xff08;也称为个人网站或博客&#xff09;&#xff0c;以下是一些建议和步骤&#xff1a; 选择一个合适的域名&#xff1a;选择一个简洁、易记且与您网站内容相关的域名。确保域名可用&#xff0c;并注册该域名。 寻找一个合适的主机服务提供商&#xff…