Vue常用修饰符

Posted 2023-04-11 前端小学生_lwd

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

1. 事件修饰符 - 处理 DOM 事件细节

2. 按键修饰符 - 为 v-on 在监听键盘事件时添加按键修饰符

3. 系统修饰键 - 实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

4. 鼠标按钮修饰符 - 限制处理函数仅响应特定的鼠标按键

5. 表单修饰符 - v-model增强的修饰符

 

一、事件修饰符

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. .keyup - 键盘抬起

2. .keydow - 键盘按下

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

常用按键码: 

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

 

三、系统修饰键 

• .ctrl
• .alt
• .shift
• .meta

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

注意点: 修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。

.exact 修饰符 - 使用系统修饰符时使用可以单击系统修饰键触发,不适用系统修饰符时使用

四、鼠标按键修饰符 

• .left - 只有鼠标左键点击触发
• .right - 只有鼠标右键点击触发
• .middle - 只有鼠标中键点击触发

 

五、表单修饰符

1. .lazy - 在表单输入时不会马上显示在页面,而是等输入完成失去焦点时才会显示在页面

2.  .trim - 过滤表单输入时前后的空格

3. .number - 限制输入数字或将输入的数据转为数字

注意点: 如果先输入数字,会限制只能输数字, 如果先输字符串则相当于没加.number

v-on事件修饰符

参考技术A v-on提供了很多事件修饰符，本文只涉及常用的五种：

首先我们将子->父逐级响应方式定义为冒泡。如果不加修饰符，事件响应方式就是冒泡。

最佳响应者->父标签->父父标签->...

为了方便理解，定位三个标签：A(子)、B( 父)、C(父父)，样式如下图：

.stop 阻止父标签响应。B使用.stop修饰：点击A，冒泡响应，C不响应。所以点击B，也只有B响应。

.capture 优先响应。B使用.capture修饰：点击A，B先响应，然后是A、C。

.self 自己为最佳响应者会冒泡响应，否则不响应。B使用.self修饰：点击B，冒泡响应；点击A，B不响应，C响应；

.once 只响应一次。

使用:stop、:capture、:self、:once修饰，效果都是被修饰者不响应事件。

.prevent 阻止事件，比如a标签使用prevent修饰 <a href="" @click.prevent="action"></a> ，执行的不是href，而是action。

最后，一个事件可以使用多个修饰符，可以根据自己需求进行排列组合。

比如B使用.capture.stop 修饰，那么点击A，只有B会响应事件，A不会响应。