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

news2024/11/28 6:30:51

文章目录

  • 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"/>

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

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

相关文章

Arduino学习

物联网学习资料 《arduino程序设计基础》陈吕洲 北京航空航天大学出版社 半颗心脏博客导航一站式搜索(所有博客的汇总帖) Ai-Thinker 安信可科技 github 半颗心脏 | 徐宏 蓝牙技术 蓝牙网关【【智能家居】入门攻略二&#xff01;啥是网关&#xff1f;蓝牙、zigbee协议详…

隐藏在背后的真相——数据存储的方式(上)

数据存储的方式 1. 数据类型详细介绍1.1类型的基本归 2. 整形在内存中的存储2.1原码&#xff0c;反码&#xff0c;补码2.2有符号&#xff08;unsigned&#xff09;和无符号&#xff08;signed&#xff09;2.3 例题 3. 大小端字节序介绍及判断 所属专栏&#xff1a;C语言❤️ &a…

学网络安全可以参考什么方向?该怎么学?

在这个圈子技术门类中&#xff0c;工作岗位主要有以下三个方向&#xff1a; 安全研发安全研究&#xff1a;二进制 方向安全研究&#xff1a;网络渗透方向 下面逐一说明一下。 安全研发 安全行业的研发岗主要有两种分类&#xff1a; 与安全业务关系不大的研发岗位与安全业务…

英文论文(sci)解读复现【NO.13】基于YOLOv5的自然场景下苹果叶片病害实时检测

此前出了目标检测算法改进专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读发表高水平学术期刊中的 SCI论文&a…

python 真正的密码,字符串排序

代码&#xff1a; from typing import List def turePassword(wordList:List[str]) ->str:wordList list(set(wordList))#排序先字符串长度&#xff0c;其次字典序wordList.sort(keylambda x :(len(x),x))ans for i in range(len(wordList)-1,-1,-1):flag Truefor j in …

蓝奥声核心技术分享——无线同步群控技术

1.技术背景 无线同步群控技术指基于对目标场景状态变化的协同感知而获得触发响应并进行智能决策&#xff0c;属于蓝奥声核心技术--边缘协同感知(EICS&#xff09;技术的关键支撑性技术之一。该项技术涉及无线物联网边缘域网络的无线通信与智能控制技术领域&#xff0c;具体主要…

浅谈人工智能怎么提升工作效率

一、引言 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;逐渐成为各行各业提高工作效率的重要工具。本报告旨在通过分析人工智能在提高工作效率方面的作用&#xff0c;探讨其具体实现方法&#xff0c;并通过案例分析来深入了解其实际应用效果和优缺点&…

算法8.从暴力递归到动态规划1

算法|8.从暴力递归到动态规划1 目前感觉&#xff0c;背包问题和货币数组问题本质相同&#xff0c;货币的与dp相关的三种代码写完了&#xff0c;快复习不完了&#xff0c;背包暂时先不写了&#xff0c;回头再写&#xff0c;补充&#xff0c;再总结&#xff0c;结合那个C大神的文…

对KMP算法的一点碎碎念——上篇

对KMP算法的一点碎碎念——上篇 文章目录 对KMP算法的一点碎碎念——上篇1. KMP 算法 Next数组 求解问题1.1 前置知识-最长公共前后缀LCP1.1.1 前缀与后缀1.1.2 最长公共前后缀LCP 1.2 手算法求解 Next数组值(3种常见情况)1.2.1 情况1: next数组 正常存放匹配字符的长度情况1的…

前端面试-React专题

目录 一.React1. React 的主要特性是什么2.React 的核心思想是3. 什么是jsx4. render()函数5. 函数组件和类组件的区别6. HTML和React中事件处理的区别7. React 中的合成事件8. 虚拟Dom&#xff1f;为什么使用&#xff1f;如何实现&#xff1f;9. 在 constructor 中给 super 函…

Excel - 如何给单元格加上下拉框

当你使用下拉列表来限制人们在单元格中的输入时&#xff0c;数据输入会更快、更准确。当有人选择一个单元格时&#xff0c;下拉列表的向下箭头就会出现&#xff0c;可以点击它并进行选择。 创建一个下拉列表 / Create a drop-down list 你可以通过提供下拉列表使工作表更有效率…

基于微信小程序的教学质量评价系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

ubuntu下编译esp32 micropython固件编译(可自行增加模块)

目录 0. 前言1. 安装ESP-IDF2. 初始化Micropython仓库3. 选择ESP-IDF相应版本情况&#xff11;情况2 4. 开始编译5.烧录固件 0. 前言 为ESP32编译Micropython固件 操作系统&#xff1a;ubuntu22.04 1. 安装ESP-IDF 本节需要ESP-IDF环境&#xff0c;安装开发环境是必要的。 …

FPGA之手把手教你做多路信号发生器(STM32与FPGA数据互传控制波形生成)

文章目录 博主的念叨一、任务介绍1、本文目标2、设计思路3、设计注意事项 二、设计代码1.顶层文件代码2.波形生成模块3.ROM例化4.PLL例化5.引脚分配 总结 博主的念叨 博主建了一个技术资源分享的群&#xff0c;开源免费&#xff0c;欢迎进来唠嗑280730348 最近趁热打铁做了一…

pandas库的常用操作介绍

目录 1.1.Pandas概述2.Pandas索引结构3.groupby学习5.Pandas数值运算二元统计6.对象操作7.merge合并显示设置9.pivot操作10. 时间操作11.常用操作12.groupby操作13.字符串操作14.索引操作15.pandas绘图操作 1.1.Pandas概述 Python的pandas库是一个数据处理和数据分析库&#x…

javascript基础七:说说你对Javascript中作用域的理解?

一、作用域 作用域&#xff0c;即变量&#xff08;变量作用域又称上下文&#xff09;和函数生效&#xff08;能被访问&#xff09;的区域或集合 换句话说&#xff0c;作用域决定了代码区块中变量和其他资源的可见性 举个粟子 function myFunction(){let name小爱同学 } undef…

6.2:荷兰国旗问题

文章目录 实现key前面的数都小于等key&#xff0c;key后面的数都大于等于key1&#xff1a;前后指针法&#xff1a;2&#xff1a;挖坑法3&#xff1a;单指针法&#xff08;左神&#xff09; 辗转相除法求最大公约数 实现key前面的数都小于等key&#xff0c;key后面的数都大于等于…

【leetCode:剑指 Offer】20. 表示数值的字符串

1.题目描述 请实现一个函数用来判断字符串是否表示数值&#xff08;包括整数和小数&#xff09;。 数值&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; 若干空格 一个 小数 或者 整数 &#xff08;可选&#xff09;一个 e 或 E &#xff0c;后面跟着一个 …

深入篇【C++】类与对象:详解内部类+匿名对象+编译器对拷贝的优化

这里写目录标题 Ⅰ.内部类【特点】1.天生友元2.直接访问static成员3.访问限制符限制4.外部类的大小 Ⅱ.匿名对象【特点】1.一行生命域2.对象具有常性3.可强行续命 Ⅲ.拷贝对象时编译器的优化 Ⅰ.内部类 概念&#xff1a;一个类定义在另一个类内部&#xff0c;这个内部的类就叫做…

【Unity100个实用小技巧】如何修改UI上材质的Shader

☀️博客主页&#xff1a;CSDN博客主页&#x1f4a8;本文由 萌萌的小木屋 原创&#xff0c;首发于 CSDN&#x1f4a2;&#x1f525;学习专栏推荐&#xff1a;面试汇总❗️游戏框架专栏推荐&#xff1a;游戏实用框架专栏⛅️点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd;&#…