Vue常用修饰符

发布时间：2023-04-24 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

在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

三、系统修饰键 

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

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

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

四、鼠标按键修饰符 

五、表单修饰符

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

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

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

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

标签 , ,