修饰符
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进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。




