Vue的事件处理及相关修饰符

·  阅读 2172
Vue的事件处理及相关修饰符

前言

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

本系列相关文章如下:

基础类

  1. 理解应用实例和组件实例 | 重学Vue3
  2. 理解模板语法 | 重学Vue3
  3. 深入理解配置选项之data和methods| 重学Vue3
  4. 理解计算属性和监听器 | 重学Vue3
  5. 绑定class和内联样式style | 重学Vue3
  6. 理解条件渲染 | 重学Vue3
  7. 理解列表渲染 | 重学vue3

手写实现类

  1. 模拟实现Vue3初始化流程
  2. 模拟实现所有Vue3响应式API(上)

本文是第10篇,关于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 来作为修饰符,比如:

<input @keyup.page-down="onPageDown" />
复制代码

6. 系统修饰键

系统修饰符其实就是按下ctrlaltshiftmeta,同时按下某个键时,才触发

例如:

<!-- Alt + Enter -->
<input @keyup.alt.enter="xxx" />
复制代码

需要注意修饰符的顺序

7. .exact 修饰符

用于更精准的控制修饰符

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
复制代码

8. 鼠标按钮修饰符

.left 左键

.right 右键

.middle 中间滚轮

使用v-on的好处

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

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

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

总结

为了方便以后查看,我将所有内容总结为一图

事件处理.png

END~

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

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

分类:
前端
收藏成功!
已添加到「」, 点击更改