vue学习--vue修饰符

一、事件修饰符

vue为v-on或者@的方式提供了事件修饰符,通过点(.)表示的指令后缀来调用修饰符。如v-on:click.stop。

.stop 阻止事件向外冒泡

.prevent 阻止默认行为

.capture 将事件冒泡改为事件捕获的方式

.self 只会触发自己的默认行为,也就是说只有在e.target === e.currentTarget 才会执行。

.once 只执行一次,后面即时数据变化我也不再重新渲染。

.passive 阻止滚动条行为(一般常用于移动端)

.native (监听组件根元素的原生事件,主要是给自定义的组件添加原生事件)

事件修饰符可以串联:<a v-on:click.stop.prevent="doThis"></a> 

二、表单修饰符

这个修饰符是作用表单标签的v-model上的。如v-model.lazy

.lazy 在改变后才触发(也就是说只有光标离开input输入框的时候值才会改变)

.number 将输出字符串转为Number类型·(虽然type类型定义了是number类型,但是如果输入字符串,输出的是string)

.trim 自动过滤用户输入的首尾空格

三、 键盘修饰符

.enter:回车键,输入内容之后,只有按下enter才会触发内容


.tab:制表键
.delete:含delete和backspace键
.esc:返回键
.space: 空格键
.up:向上键
.down:向下键
.left:向左键
.right:向右键

四、系统修饰符

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

.ctrl
.alt
.shift
.meta

如: 输入文字时候,同时按下shift才有用。

备注:这个修饰符必需两个键同时按下才有用。

五、鼠标修饰符

.left
.right


.middle

六、自定义按键修饰符别名

 

发布了70 篇原创文章 · 获赞 13 · 访问量 9735

猜你喜欢

转载自blog.csdn.net/qq_38588845/article/details/104994690