【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…

TVM_深度学习编译器

TVM_深度学习编译器 TVM所做的是要比传统compiler更偏上层的&#xff0c;你可以把它理解成source-to-source compiler&#xff0c;需要其他的后端(backend)来生成最后的指令。比如当编译的Target是Intel CPU时&#xff0c;翻译的顺序是Relay IR -> TVM IR/ Halide IR ->…

一、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;如果是下面那个…

css性能优化的方法?

CSS 优化在网页性能和用户体验中起着重要作用。以下是一些常见的 CSS 优化方法&#xff1a; 合并和压缩CSS文件&#xff1a; 将多个 CSS 文件合并为一个文件&#xff0c;并对其进行压缩&#xff0c;可以减少 HTTP 请求次数和文件大小&#xff0c;加快页面加载速度。 使用CSS预处…

全面解析 LoRA、QLoRA、RLHF,PPO,DPO,Flash Attention、增量学习等大模型算法

随着大模型的飞速发展&#xff0c;在短短一年间就有了大幅度的技术迭代更新&#xff0c;从LoRA、QLoRA、AdaLoRa、ZeroQuant、Flash Attention、KTO、蒸馏技术到模型增量学习、数据处理、新的开源模型的理解等&#xff0c;几乎每天都有新的发展。 作为算法工程师&#xff0c;面…

【Linux】文本替换Ubuntu 中 sed 指令的使用指南

没什么 大愿望 没有什么事 要赶 看见路口红灯 一直闪 它像 眨眼的小太阳 乌云还 挺大胆 顶在头上 吹不散 我抓在手里 捏成棉花糖 什么烦恼 不能忘 既然 是路一定有转弯 哪个风景 都漂亮 &#x1f3b5; 周深《小美满》 在 Ubuntu&#xff08;或其他类 Unix…

09.JavaScript中的深浅拷贝和异常处理

一、深浅拷贝 1.浅拷贝 首先浅拷贝和深拷贝只针对引用类型 浅拷贝&#xff1a;拷贝的是地址 常见方法&#xff1a; 拷贝对象&#xff1a;Object.assgin() / 展开运算符 {…obj} 拷贝对象拷贝数组&#xff1a;Array.prototype.concat() 或者 […arr] 如果是简单数据类型拷贝…

pdfgear:免费易用的pdf处理软件,轻松进行pdf文件转换、阅读、编辑等

名人说:东边日出西边雨,道是无晴却有晴。——刘禹锡 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 一、软件介绍①pdfgear②核心功能③PDFgear的优势二、下载安装①下载②安装三、使用方法①阅读②pdf编辑③pdf转换四、总结

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里面叫板子, 象棋五子棋里叫棋谱, 咱这里叫 设计模式), 略加修改, 这样代码再差也差不到哪里去 … …

clickhouse(配合bytebase)_docker搭建文档

特点 数据吞吐量非常大&#xff0c;能够存储海量的数据&#xff0c;并能够以水平扩展的方式进行扩容。对大表的查询计算处理效率也非常高&#xff0c;甚至很多场景下都可以拥有数百列的数据规模&#xff0c;很多大规模的数据查询也都能轻松达到毫秒级别 但需要指出&#xff0…

已解决org.apache.zookeeper.KeeperException.BadArgumentsException异常的正确解决方法,亲测有效!!!

已解决org.apache.zookeeper.KeeperException.BadArgumentsException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 解决思路 解决方法 控制数据大小&#xff1a;在写入数据前&#xff0c;检查数据大小是否超过限…