vue2常用修饰符及其作用
阅读数:124 评论数:0
跳转到新版页面分类
html/css/js
正文
一、概述
在Vue中，修饰符处理了许多dom事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多精力专注于程序的逻辑处理。
1、修饰符分类
（1）表单修饰符
（2）事件修饰符
（3）鼠标按键修饰符
（4）键值修饰符
（5）v-bind修饰符
二、表单修饰符
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
光标离开标签的时候，才会将值赋予给value。
<input type="text" v-model.trim="value">
自动过滤用户输入的首空格字符，而中间的空格不会过滤。
<input v-model.number="age" type="number">
自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值。
三、事件修饰符
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只输出1
阻止事件冒泡，相当于调用了event.stopPropagation方法。
<form v-on:submit.prevent="onSubmit"></form>
阻止了事件的默认行为，相当于调用了event.preventDefault方法。
<div v-on:click.self="doThat">...</div>
只当在event.target是当前元素自身时触发函数。
使用修饰符，顺序很重要；因此v-on:click.prevent.self会阻止所有的点击，而v-on:click:self:prevent只会阻止对元素自身的点击。
<button @click.once="shout(1)">ok</button>
绑定的事件以后只能触发一次，第二次就不会触发。
<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
使事件触发从包含这个元素的顶层开始往下触发。
表示不阻止默认行为，主要用于提高性能。
<my-component v-on:click.native="doSomething"></my-component>
http://1024s.top/blog/detail?blogId=37960
四、鼠标按钮修饰符
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>
分别表示左键点击，右键点击，中键点击。
| @click/@dblclick | 单击事件 / 双击事件 |
| @mousedown/@mouseup | 按下触发 / 抬起触发 |
| @mousemove | 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件 |
| @mouseleave | 当鼠标指针离开被选元素时，会发生 mouseleave 事件 |
| @mouseout | 与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 |
| @mouseenter | 当鼠标指针进入被选元素时，会发生 mouseenter 事件 |
| @mouseover | 与 mouseenter 事件不同，mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发，mouseenter 事件只有在鼠标指针进入被选元素时被触发。 |
五、键盘修饰符
1、普通键（enter、tab、delete、space、esc、up...）
2、系统修饰键(ctrl、alt、meta、shift...)
// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout()">
六、v-bind修饰符
能对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);
}
（1）使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中的props中声明的名称完全一致。
（2）注意带有.sync修饰符的v-bind不能和表达式一起使用
（3）将v-bind.sync用在一个字面量的对上，例如v-bind:sync="{title: doc.title}"，是无法正常工作的。
将命名变为骆峰命名法