理解事件处理及相关修饰符 | 重学Vue3

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！

本文是关于Vue的事件处理及相关修饰符

看文本篇，你将会对Vue的事件处理有个清晰的认识

本文目录结构如下：

image.png

监听事件

此处分3点来讲：

image.png

1. 可以使用 v-on 指令来监听事件

2. 触发事件时执行一些JS代码

3. 用法

用法如下：

v-on:click="xxx"

也可以使用简写模式@

@click="xxx"

注意：

xxx可以是一个js表达式，也可以是一个事件处理函数

一般使用第二种方式@

事件处理函数

此处分3点来讲：

image.png

1. 简介

通常事件处理逻辑比较复杂，所以我们会写成一个函数，这个函数就被称为事件处理函数，也叫事件处理器

2. 形式

如下代码

@click="methodName"

上面代码中，methodName就是事件处理函数，它会自动去组件实例身上找对应的函数

3. 注意

事件处理函数默认会传递原生event对象

处理函数可传递参数

1. 可以像正常函数调用一样，给事件处理函数传递参数

2. 如果需要访问原始的DOM事件，需手动传递$event，表示原生event

多个处理函数

1. vue支持一个事件多个处理函数

2. 多个函数通过逗号分隔即可

事件修饰符

此处分一下8点来讲：

image.png

1. 简介

Vue为 v-on 提供了事件修饰符

2. 形式

以点开头

3. 几个常见修饰符

.stop
表示停止冒泡

.prevent
表示阻止默认事件

.capture
表示使用事件捕获模式

.self
表示当在event.target 是当前元素自身时触发处理函数

.once
表示事件只会触发一次

.passive
表示处理事件函数中不会调用preventDefault函数

4. 修饰符可以连续出现多个

形式，如：

v-on:click.prevent.self

注意：多个修饰符顺序不同，效果会不一样

5. 按键修饰符

.enter
表示当按下键盘的Enter键时触发

.tab
表示按下Tab键时

.delete
表示按下删除或退格键时

.esc
表示按下Esc时

.space
表示按下空格时

.up
表示按向上箭头时

.down
表示按向下箭头时

.left
表示按向左箭头时

.right
表示按向右箭头时

除此以外，还可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符，比如：

6. 系统修饰键

系统修饰符其实就是按下ctrl或alt或shift或meta，同时按下某个键时，才触发

例如:

需要注意修饰符的顺序

7. .exact 修饰符

用于更精准的控制修饰符

A

A

8. 鼠标按钮修饰符

.left
左键

.right
右键

.middle
中间滚轮

使用v-on的好处

1. 扫一眼模板便能轻松定位在js中对应的方法

2. 因为你无须在 JS 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM完全解耦，更易于测试

3. 无须担心如何清理它们；
   当一个ViewModel 被销毁时，所有的事件处理器都会自动被删除

END~

以上就是事件相关的所有内容

如有问题，欢迎留言告知，感谢~

为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map