暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

vue 修饰符大全

前端囧事 2022-02-08
993

修饰符

vue修饰符是指在触发事件或按键时额外的处理逻辑,比如点击事件只允许触发一次,可以使用@click.once

v-model修饰符

.lazy

默认情况下使用input事件进行数据更新,使用lazy后转变为change事件进行数据更新

<input type="text" v-model.lazy="value" />

.trim

输入框过滤首尾的空格

<input type="text" v-model.trim="value" />

.number

先输入数字就会限制输入只能是数字,先字符串就相当于没有加number,注意,不是输入框不能输入字符串,是这个数据是数字

<input type="text" v-model.number="value" />

事件修饰符

.stop

阻止事件冒泡,相当于调用了event.stopPropagation()方法

<button @click.stop="test">test</button>

.prevent

阻止默认行为,相当于调用了event.preventDefault()方法,比如表单的提交、a标签的跳转就是默认事件

<a @click.prevent="test">test</a>

.self

只有元素本身触发时才触发方法,就是只有点击元素本身才会触发。比如一个div里面有个按钮,div和按钮都有事件,我们点击按钮,div绑定的方法也会触发,如果div的click加上self,只有点击到div的时候才会触发,变相的算是阻止冒泡:

<div @click.self="test">test</div>

.once

事件只能用一次,无论点击几次,执行一次之后都不会再执行

<button @click.once="test">test</button>

.capture

添加事件监听器时使用事件捕获模式

.sync

按键修饰符

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<input v-on:keyup.13="submit" />
<input @keyup.enter="submit" />

全部的按键别名

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

系统修饰键

.ctrl
.alt
.shift
.meta

事件句柄

属性监听事件
onabort图像加载被中断
onblur元素失去焦点
onchange用户改变域的内容
onclick鼠标点击对象
ondblclick鼠标双击对象
onerror当加载文档或图片时出现错误
onfocus元素获得焦点
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onload某个页面或图像被加载完成
onmousedown某个鼠标按键被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标被移到某元素之上
onmouseup某个鼠标按键被松开
onreset重置按钮被点击
onresize窗口或框架被调整尺寸
onselect文本被选定
onsubmit提交按钮被点击
onunload用户退出页面


文章转载自前端囧事,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论