【vue.js】文档解读【day 4】 | 事件处理

在这里插入图片描述

如果阅读有疑问的话,欢迎评论或私信!!

文章目录

  • 事件处理
    • 前言
    • 监听事件
    • 内联事件处理器
    • 方法事件处理器
    • 方法与内联事件判断
    • 在内联处理器中调用方法
    • 在内联事件处理器中访问事件参数
    • 修饰符
      • 事件修饰符
      • 按键修饰符
      • 常规按键别名
      • 系统按键别名
      • 组合按键
      • exact 修饰符
      • 鼠标按键修饰符

事件处理

前言

我们在模板语法板块中简单介绍过v-on指令的使用方法,我们可以通过v-on绑定一个DOM事件,或者使用@绑定,对于其中的值(也就是事件处理器),我们可以是一个方法。在该章节中,我们会知道绑定事件的详细介绍。

监听事件

事件处理器的值可以是:

  1. 内联事件处理器:事件被触发时执行的内联JavaScript语句。也就是不同表达式的代码
  2. 方法事件处理器:一个指向组件上定义的方法的属性名或是路径,也就是找包含不同表达式代码的地方在哪里。

内联事件处理器

内联事件处理器通常用于简单场景,例如:

<template><button @click="this.keyTest.unshift({ id: 10, myName: "新的" });">添加</button>
</template><script>data() {var keyTest = [{id: 0,myName: 1,},{id: 1,myName: 2,},{id: 2,myName: 3,},{id: 3,myName: 4,},{id: 4,myName: 5,},];return {keyTest}
}
</script>

方法事件处理器

由于内联事件处理器在面对复杂逻辑时会显得有些冗余,并且不够灵活。所以加入了方法事件处理器,它可以接受一个方法名,用于处理更复杂的事件处理逻辑。例如:

<template><button @click="greet">Test</button>
</template><script>methods: {greet(event) {// `event` 是 DOM 原生事件if (event) {console.log(event);}},}
</script>

在方法事件处理器中,我们可以使用任意变量名表示一个DOM事件参数,推荐使用event表示,增加可读性。其中eventDOM原生事件,并没有被包装,例如可以使用event.target.tagName来获取当前调用DOM的标签名。

方法与内联事件判断

在对vue模板编译时,编译器会检查v-on指令中的值。如果是一个属性访问路径,那么就当作是一个方法事件处理器处理;如果是JavaScript标识符或是一个调用方法,那么就会当作是一个内联事件处理器处理。

在内联处理器中调用方法

在上面我们讲到对一个函数的调用属于内联处理器,其中的参数也不再是方法事件处理器中所将的DOM原生事件,而是自定义参数:

<template><button @click="say('hello')">Say hello</button><button @click="say('bye')">Say bye</button>
</template><script>methods: {say(message) {alert(message)}}
</script>

在内联事件处理器中访问事件参数

我们目前知道方法事件处理器中的参数是DOM原生事件内联事件处理器自定义参数,那么除了自定义参数,我们还可以向方法中传递$event变量,表示我们使用DOM原生事件参数,例如:

<template><button @click="greet('123')">Test</button>
</template><script>methods: {greet(customName,$event) {console.log(customName); //123 PointerEvent {isTrusted: true,…}},}
</script>

我们还可以先在内联代码中使用箭头函数将当前原生DOM事件作为参数传入到方法中,例如:

<template><button @click="(event)=>{greet('123',event)}">Test</button>
</template><script>methods: {greet(customName,$event) {console.log(customName); //123 PointerEvent {isTrusted: true,…}},}
</script>

修饰符

Vue为我们提供了许多便捷修饰符,使我们的代码更简洁。提供修饰符的目的是使我们的代码能更注重其中的逻辑性,而不会被一些细节问题打乱。修饰符使用.后缀使用,和v-on指令一起使用。

事件修饰符

  • .stop 阻止元素向上冒泡
  • .prevent 清除DOM默认行为
  • .self 等同于先进行event.target === this判断,如果是自身才触发,是为了防止冒泡引起问题。
  • .capture 在多层DOM嵌套中,触发内部元素,会引起外部元素的相应事件,而capture可以使当前DOM优先处理。
  • .once 事件最多被触发一次
  • .passive 与prevent相对,可以说是防止清除DOM默认行为

按键修饰符

Vue同时为我们提供了按键修饰符,可以使用KeyboardEvent键盘事件加.后缀使用。例如:

<template><input type="text" @keyup.a="console.log('a')">
</template>

在输入时,如果发生a键松开时,触发监听事件。

在修饰符命名中,我们使用的是-分隔符,而不是驼峰命名。例如:

<template><input type="text" @keyup.page-down="console.log('pageDown')">
</template>

常规按键别名

  • .enter 回车键
  • .tab 换行键
  • .delete (捕获“Delete”和“Backspace”两个按键)
  • .esc 退出键
  • .space 空格
  • .up ↑键
  • .down ↓键
  • .left ←键
  • .right →键

系统按键别名

  • .ctrl
  • .alt
  • .shift
  • .meta 在 Mac 键盘上,meta 是 Command 键 (⌘)。在 Windows 键盘上,meta 键是 Windows 键 (⊞)。

组合按键

当常规+常规组合监听时,效果是两个键每一个都可以触发一次监听事件。例如:

<template><input type="text" @keyup.1.a="console.log('a || 1')">
</template>

当常规+系统组合监听时,效果是两个键同时按下时触发一次监听事件。

<template><input type="text" @keyup.ctrl.a="console.log('ctrl && a')">
</template>

请注意,系统按键修饰符和常规按键不同。与 keyup 事件一起使用时,该按键必须在事件发出时处于按下状态。换句话说,keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

exact 修饰符

exact翻译为准确的,是为了我们可以准确的使用键盘事件。该修饰符只能用于常规+系统组合。例如:

<!-- 当按下 Ctrl 点击按钮时,即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

  • .left
  • .right
  • .middle

这些修饰符将处理程序限定为由特定鼠标按键触发的事件。

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

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

相关文章

3d场景重建图像渲染 | 神经辐射场NeRF(Neural Radiance Fields)

神经辐射场NeRF&#xff08;Neural Radiance Fields&#xff09; 概念 NeRF&#xff08;Neural Radiance Fields&#xff0c;神经辐射场&#xff09;是一种用于3D场景重建和图像渲染的深度学习方法。它由Ben Mildenhall等人在2020年的论文《NeRF: Representing Scenes as Neur…

一、C#冒泡排序算法

一、C#冒泡排序算法 简介 冒泡排序算法是一种基础的排序算法&#xff0c;它的实现原理比较简单。核心思想是通过相邻元素的比较和交换来将最大&#xff08;或最小&#xff09;的元素逐步"冒泡"到数列的末尾。 实现原理 冒泡排序是一种简单的排序算法&#xff0c;其…

CSS Module

CSS Module的作用&#xff1a;将CSS样式作用域限制在特定的组件范围内&#xff0c;以避免全局样式污染和命名冲突。 Vue中如何实现样式模块…

【TB作品】MSP430单片机,音乐播放器,四首音乐,八音盒,Proteus仿真

文章目录 题目要求仿真结果实验报告&#xff1a;基于MSP430单片机的八音盒设计实验目的实验设备实验原理总结 代码和仿真图 题目要求 八音盒 本设计利用MSP430单片机结合内部定时器及LED/LCD,设计一个八音盒,按下单键可以演奏预先设置的歌曲旋律。 基本要求: 使用LED/LCD显示器…

JAVA基础:数组、重载、数据类型、封装、字符串、静态、继承、重写、多态、代码块、权限、接口、内部类

1 数组 //静态初始化 int[] arr1new int[]{1,2,3,4} //简化形式 int[] arr2{1,2,3,4} //动态初始化 int[] arr3new int[5] 2 方法重载 在同一个类中的多个方法的方法名相同,参数个数不同&#xff0c;参数类型不同&#xff0c;参数类型顺序不同 public class Test1 {public …

【javaWeb】在webapp中手动发布一个应用

标题 &#x1f432;一、为什么要在webapp中手动发布一个应用&#x1f389;二、手动发布步骤1.下载Tomcat2.解压并安装3.在webapps中创建文档 ✨三、总结 &#x1f432;一、为什么要在webapp中手动发布一个应用 好处解释灵活性手动发布应用程序可以根据自己的需求进行自定义配置…

2.24计组碎片

op(a1)说的是对a1存的数&#xff0c;即&#xff08;a1)&#xff0c;进行op操作 访存说的是访问、读写主存&#xff0c;如果是写在寄存器上&#xff0c;就不需要访存 对于C就是说&#xff0c;如果是1100-1110的话&#xff0c;就可以对应取到0000-1111&#xff0c;如果是下面那个…

Spring状态机简单实现

一、什么是状态机 状态机&#xff0c;又称有限状态自动机&#xff0c;是表示有限个状态以及在这些状态之间的转移和动作等行为的计算模型。状态机的概念其实可以应用的各种领域&#xff0c;包括电子工程、语言学、哲学、生物学、数学和逻辑学等&#xff0c;例如日常生活中的电…

基于单片机的恒压供水控制器设计

摘 要 随着我国现代化的进程不断加快&#xff0c;城市居民生活水平不断提高&#xff0c;随之而来的是房屋的翻新和重建&#xff0c;但建筑层数的不断增高&#xff0c;使得供水所需压力不断提高&#xff0c;若建筑设计时对压力判断不足&#xff0c;会导致供水时无法供应到高楼层…

2.1HTML5基本结构

HTML5实际上不算是一种编程语言&#xff0c;而是一种标记语言。HTML5文件是由一系列成对出现的元素标签嵌套组合而成&#xff0c;这些标签以<元素名>的形式出现&#xff0c;用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上&#xff0c;而元…

【Jenkins】data stream error|Error cloning remote repo ‘origin‘ 错误解决【亲测有效】

错误构建日志 17:39:09 ERROR: Error cloning remote repo origin 17:39:09 hudson.plugins.git.GitException: Command "git fetch --tags --progress http://domain/xxx.git refs/heads/*:refs/remotes/origin/*" returned status code 128: 17:39:09 stdout: 17…

多线程(代码案例: 单例模式, 阻塞队列, 生产者消费者模型,定时器)

设计模式是什么 类似于棋谱一样的东西 计算机圈子里的大佬为了能让小菜鸡的代码不要写的太差 针对一些典型的场景, 给出了一些典型的解决方案 这样小菜鸡们可以根据这些方案(ACM里面叫板子, 象棋五子棋里叫棋谱, 咱这里叫 设计模式), 略加修改, 这样代码再差也差不到哪里去 … …

数码管的动态显示(三)

1.原理 data_reg寄存&#xff0c;只寄存符号位和数据位不包含小数点位。 动态数码管每个显示1ms&#xff0c;所以计数到5*10^4-1 为了将sel和seg同步&#xff0c;把sel打了一拍。 6位都使用到了可以这么计算&#xff0c;6位都显示的是数据。或者最高位显示的是小数点&#xff…

Yolo系列各代网络结构分析(一)

Yolo系列 Yolo系列算是目标检测领域的常青树了&#xff0c;从v1到最近的v9&#xff0c;一直都在不断迭代&#xff0c;不断改进&#xff0c;但是细看其各代网络的发展&#xff0c;其实还是有很多一脉相承之处以及算法设计偏好的&#xff0c;总结主要为以下几个方面&#xff1a;…

【计算机视觉】二、图像形成:1、向量和矩阵的基本运算:线性变换与齐次坐标

文章目录 一、向量和矩阵的基本运算1、简单变换1. 平移变换2. 缩放变换3. 旋转变换4. 一般线性变换 2、齐次坐标0. 齐次坐标表示1. 2D点的齐次坐标变换2. 投影空间 ( x , y , w ) (x, y, w) (x,y,w)3. 2D直线的齐次坐标表示a. 直线的参数方程表示b. 直线的法向量和原点距离表示…

深度解析Elasticsearch索引数据量过大的优化与部署策略

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 1. 分片和副本策略 1.1分片策略 1.1.1 数据量 1.1.…

sqllab第二十一关通关笔记

知识点&#xff1a; 错误注入 最大长度为32超过需要利用截取函数分段读取cookie注入base64加密会保留符号的原始属性 通过admin admin进行登录发现和第二十关显示的内容一样&#xff0c;猜测应该还是cookie注入&#xff1b; 直接截取带有cookie的数据包&#xff0c;发现uname…

【计算机网络】概述

文章目录 一、Internet 因特网1.1 网络、互联网、因特网1.2 因特网的组成 二、三种交换方式2.1 电路交换 &#xff08;Circuit Switching&#xff09;2.2 *分组交换 &#xff08;Packet Switching&#xff09;2.3 报文交换 &#xff08;Message Switching&#xff09; 三、计算…

100W-150W电阻器-TO-247模压厚膜电阻(1)

EAK封装的TO-247功率电阻器为设计工程师提供稳定的晶体管式封装的大功率电阻器件&#xff0c;功率为100W-150W。这些电阻器专为需要精度和稳定性的应用而设计。该电阻器采用氧化铝陶瓷层设计&#xff0c;可将电阻元件和安装片分开。 EAK模压TO-247厚膜功率电阻器 这种结构提供了…

Redis基本使用

Redis基本使用 1.通用命令2.基本数据类型2.1 String2.2 Hash2.3 List2.4 Set2.5 SortedSet 3. SpringDataRedis3.1 简介3.2 快速代码示例3.3 序列化 1.通用命令 针对所有数据类型的操作可以在Redis官方文档查看。以下是通用的命令。 KEYS&#xff1a;查看符合模板的所有key D…