聊聊vue中的修饰符，常用事件修饰符【总结】

前言

本篇文章会带大家聊一聊vue指令中的修饰符，对比vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！

在vue中有以下几种常用修饰符

1. 事件修饰符 - 处理 DOM 事件细节
2. 按键修饰符 - 为 v-on 在监听键盘事件时添加按键修饰符
3. 表单修饰符 - v-model增强的修饰符
4. 鼠标按钮修饰符 - 限制处理函数仅响应特定的鼠标按键
5. 对比vue指令修饰符和dom事件的event对象

一、事件修饰符

在事件处理程序中，会有一些功能需要修饰，例如需要阻止某些事件的默认行为或者提交时不重新加载页面。为了解决这个问题,vue.js提供了一些事件修饰符以供我们使用。
修饰符是由点开头的指令后缀名来表示

1. .stop - 阻止事件继续传播, （阻止冒泡）。
2. .prevent - 阻止标签默认行为。
   注意： .stop和.prevent可以串联在一起使用,都会生效。
3. .capture - 使用事件捕获模式，内部元素触发的事件先在此处理，然后才交给内部元素来处理。
4. .self - 只当在 event.target 是当前元素自身时触发处理函数。
   注意：
   使用事件修饰符的时候，使用的顺序也很重要。
   用 v-on:click.prevent.self 会阻止所有的点击。
   用v-on:click.self.prevent 只会阻止对元素自身的点击。
5. .once - 只执行一次，再次点击不会执行。 不仅能对原生DOM时间生效,还可以用在自定义组件上。
6. .passive - 告诉浏览器不阻止事件的默认行为。
   注意： 当和.prevent一起使用时.prevent会被忽略并警告。
7. .native - 使用时将被当做原生的HTML标签看待,绑定事件可以生效

二、按键修饰符

1. 按键码 — 在按键修饰符后面添加,用于监听键盘按下哪个键

常用按键码:

• .enter — 捕获enter键
• .tab — 捕获tab键
• .delete — 捕获删除和退格按键
• .esc — 捕获取消键
• .space — 捕获空格键
• .up — 捕获上键
• .down — 捕获下键

2. .keyup — 键盘抬起

3. .keydow — 键盘按下

三、表单修饰符

1. .lazy — 在表单输入时不会马上显示在页面,而是等输入完成失去焦点时才会显示在页面
2. .trim — 去除先后的空格
3. .number — 限制输入数字或将输入的数据转为数字

如果先输入数字,就只能输入数字其他的不可以输入, 如果先输字符串则相当于没加.number

四、鼠标按键修饰符

1. .left — 鼠标左键点击时触发
2. .right — 鼠标右键点击时触发
3. .middle — 鼠标中键点击时触发

五、对比vue指令修饰符和dom事件的event对象

在我们学习使用vue的修饰符之前，使用的时dom操作中的event对象的常用方法/属性。
而我们常用的event属性有以下这些：

1. 阻止默认事件行为

例如：a标签的跳转、form表单的提交

```
 event.preventDefault()
```

2. 阻止冒泡事件

例如：父元素绑定事件，子元素也绑定事件，点击子元素时同时也会出发父元素的事件
```
event.stopPropagation()
```

3. 阻止后续事件的触发

例如：给一个元素绑定两个事件A和B，当A运行的时候不会运行B）
```
event.stopImmediatePropagation()
```

4. 指向监听器直接绑定的元素

```
event.currentTarget
```

5. 获取当前会触发该事件的元素对象

```
 event.Target
```

总结

这篇文章给大家总结了vue中常用的修饰符有哪些和对比dom事件中的event对象，相同或不同的功能。

大家可以动动小手关注博主，方便观看后续内容