vue修饰符

依然范特西╮ 提交于 2020-03-11 14:48:18


.lazy----<input type="text" v-model.lazy="value">----在光标离开后input框才会更新数据
.trim----<input type="text" v-model.trim="value">----输入框过滤首尾的空格
.number----<input type="text" v-model.number="value">----加了number修饰符后,如果先输入的是数字,表示这个输入框只能输入数字,如果先输入了字符串,等于这个输入框没有加number修饰符,所以这个修饰符就是个垃圾,还是得用正则判断

事件修饰符:
.stop----<button @click.stop="test"></button>----阻止事件冒泡
.prevent----<a @click.prevent="test"></a>----组件浏览器默认事件
.self----<div @click.self="test"></div>----只有点击到元素本身才会触发----bug:@click.self阻止了自身的点击,必须要点击到padding区域才行
.once----<div @click.once="test"></div>----只有第一次点击有效
.capture----<div @click.capture="test(1)"> <button @click="test(2)">test</button></div>----先1后2----事件机制是捕获-目标-冒泡,capture是倒过来
.passive----<div v-on:scroll.passive="onScroll">...</div>----滚动事件会立即触发,每次滚动都有一个默认事件触发,加了passive就是告诉浏览器,不需要查询,不需要触发这个默认事件
.native----<My-component @click.native="test"></My-component>----给组件绑定原生事件,给vue组件绑定事件的时候,必须加上 .native ,否则会认为监听的是来自子组件自定义的事件,等同于在子组件内部处理click事件后向外发送click事件($emit())
.left .right .middle----<button @click.right="test">test</button>----鼠标点击的时候触发

按键修饰符:.enter .esc .left .right .up .dowm .tab .delete .scape----<input type="text" @keyup.enter="test">
.keyCode----<input type="text" @keyCode(13)="test">

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!