10. Vue 常用的修饰符的作用详解？
10. Vue 常用的修饰符的作用详解？
Vue 的修饰符是什么
Vue 中的修饰符分为以下五种:
- 表单修饰符
- 事件修饰符
- 鼠标按键修饰符
- 键值修饰符
v-bind修饰符
修饰符的作用
表单修饰符
lazy
填完信息, 光标离开标签的时候, 才会将值赋予给 value。
<input type="text" v-model.lazy="value">
trim
自动过滤用户输入的首空格字符, 中间的空格不会过滤。
<input type="text" v-model.trim="value">
number
自动将用户输入的值转为数值类型, 如果不能被 parseFloat 解析, 会返回原来的值。
<input v-model.number="age" type="number">
事件修饰符
stop
阻止了事件冒泡, 相当于调用了 event.stopPropagation。
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
// 只输出1
prevent
阻止了事件的默认行为, 相当于调用了 event.preventDefault 方法。
<form v-on:submit.prevent="onSubmit"></form>
once
绑定了事件以后只能触发一次, 第二次就不会触发。
<button @click.once="shout(1)">ok</button>
self
只会触发自己范围内的事件, 不包含子元素。
注意: self 是阻止自身不执行冒泡触发, 不会阻止冒泡继续向外触发; stop 是从自身开始阻止冒泡不向外触发。所以 self 一般用在父元素上, stop 一般用在子元素上。
鼠标按钮修饰符
left
左键点击。
<button @click.left="shout(1)">ok</button>
right
右键点击。
<button @click.right="shout(1)">ok</button>
middle
中键点击。
<button @click.middle="shout(1)">ok</button>
键盘修饰符
键盘修饰符用来修饰键盘事件( onkeyup, onkeydown)的, 有如下:
普通键
entertabdeletespaceesc
系统修饰键
ctrlaltmetashift
v-bind 修饰符
props 设置自定义标签属性, 避免暴露数据, 防止污染 HTML 结构。
<input id="uid" title="title1" value="1" :index.prop="index">
常用的应用场景
stop: 阻止事件冒泡native: 绑定原生事件once: 事件只执行一次self: 将事件绑定在自身身上, 相当于阻止事件冒泡prevent: 阻止默认事件caption: 用于事件捕获once: 触发一次keyCode: 监听特定键盘按下right: 右键