vue中修饰符分为:表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符
1.表单修饰符
这个修饰符主要是用在表单常用的v-model指令上,对表单的输入内容进行修饰,关于表单的修饰符有:
-
lazy
lazy跟懒加载类似,在表单上是在我们填写信息的时候不会触发v-model值的变化,只有光标离开的时候才会赋值;也就是在input事件的oninput触发的时候不会赋值,当onchange触发时候进行赋值。<input type="text" v-model.lazy="value"> <p>{{value}}</p>
-
trim
过滤掉输入内容的前后空格<input type="text" v-model.trim="value">
-
number
会将输入的值转为数值类型<input v-model.number="age" type="number">
2.事件修饰符
事件修饰符是对事件捕获以及目标进行了处理,修饰符有下:
-
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>
-
self
只有在event.target是当前元素自身时触发<div v-on:click.self="doThat">...</div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击
-
once
绑定的事件只能触发一次<button @click.once="shout(1)">ok</button>
-
capture
让事件触发从包含这个元素的顶层开发往下依次触发<div @click.capture="shout(1)"> obj1 <div @click.capture="shout(2)"> obj2 <div @click="shout(3)"> obj3 <div @click="shout(4)"> obj4 </div> </div> </div> </div> // 输出结构: 1 2 4 3
-
passive
这个我们以移动端监听元素滚动事件说明,在监听元素滚动事件的时候,会一直触发onscroll事件让页面变的越来越卡,因此在我们使用这个修饰符后,相当于给onscroll事件增加了.lazy修饰符<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。
passive 会告诉浏览器你不想阻止事件的默认行为 -
native
让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用v-on只会监听自定义事件<my-component v-on:click.native="doSomething"></my-component>
使用.native修饰符来操作普通HTML标签是会令事件失效的
3.鼠标按钮修饰符
-
鼠标按钮修饰符针对的就是鼠标的左键(left)、右键(right)和中键(middle)的点击操作,如下:
<button @click.left="shout(1)">ok</button> <button @click.right="shout(1)">ok</button> <button @click.middle="shout(1)">ok</button>
4.键盘修饰符
键盘修饰符用来修饰键盘的事件(如:onkeyup、onkeydown等),键盘的事件触发需要相对应的keyCode。然而keyCode存在很多,因此为了使用方便Vue给我们提供了别名的修饰符,分为以下两种:
-
普通按键(enter、delete、space、tab、esc…)
-
系统修饰键(ctrl、shift、alt…)
-
也可以直接用按键的代码来做修饰符(如:enter为13)
<!-- 键修饰符,键别名 --> <input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 --> <input @keyup.13="onEnter">
-
官方例子:
Vue.config.keyCodes = { v: 86, f1: 112, // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case 且用双引号括起来 "media-play-pause": 179, up: [38, 87] }
使用方式: <input type="text" @keyup.media-play-pause="method">
5.v-bind修饰符
v-bind修饰符主要为属性进行操作的,这个也是所有修饰符中最不常用的一类,这些修饰符有:
-
async
能对props进行一个双向绑定//父组件 <comp :myMessage.sync="bar"></comp> //子组件 this.$emit('update:myMessage',params);
以上这种方法相当于以下的简写:
//父亲组件 <comp :myMessage="bar" @update:myMessage="func"></comp> func(e){ this.bar = e; } //子组件js func2(){ this.$emit('update:myMessage',params); }
使用async需要注意以下几点:
使用async的时候,自组件传递的事件名必须格式必须为update:value, 其中value必须与自组件中props中声明的名称完全一致
注意大理由.sync修饰符的v-bind不能和其他的表达式一起使用
将v-bind.sync用在一个字面量的对象上,例如v-bind.sync=“{title: doc.title}”, 是无法正常工作的 -
props
设置自定义标签属性,避免暴露数据,防止污染HTML结构<input id="uid" title="title1" value="1" :index.prop="index">
-
camel
将命名变为驼峰法命名法,如将view-box属性名转换为viewBox<svg :viewBox="viewBox"></svg>
应用场景
- 根据每一个修饰符的功能,我们可以得到以下修饰符的使用场景: