在开发的过程中,如果我们能够熟练掌握vue的修饰符,就可以大大提高我们的开发效率
分类
- 表单修饰符
- 事件修饰符
- 鼠标按键修饰符
- 键值修饰符
表单修饰符
- .lazy
<div>
<input type="text" v-model="value">
<p>{{value}}</p>
</div>
//每次数据改变,视图都会发生改变
=======================
<div>
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
</div>
//只有光标离开之后,数据才会发生改变
- .trim
在进行传递参数或者登陆注册的时候,经常会出现空格耽误事的问题,这个修饰符就会很好的解决这一问题
<input type="text" v-model.trim="value" />
// 当输入` name x ` -> `name x`
- .number
可以限制输入框是数字类型,但是有问题!!! 不能先输入字母在输入数字,否则无效
<input type="text" v-model.number="value" />
事件修饰符
- .stop
阻止冒泡事件
<div>
<p
@click.stop="shunt(1)"
></p>
</div>
// 点击p的时候,就会阻止冒泡行为了
- .prevent
阻止默认事件
<a href="#" @click.prevent="shunt(1)"></a>
// 点击p的时候,就会默认的事件
- .once
触发一次,他的名字和他的用法一模一样
<button @click.once="shunt(1)">触发</button>
- .native
当我们写小组件的时候,可能需要绑定一些事件,但是正常绑定可能是无效的,例如下面这样
<my-demo @click="shunt(1)"></my-demo>
===========================
<my-demo @click.native="shunt(1)"></my-demo>
//才是有效的
- .passive
当我们监听滚动事件的时候,会一直触发onscroll事件,在pc端我们是没有任何问题的,但是如果在手机端,会变得很卡,那么passive相当于是给scroll添加了一个lazy事件,
<div @scroll.passive="xxxx()">这里面内容很多</div>
- .capture
我们都知道事件的机制是: 捕获机制->目标阶段->事件冒泡,当我们设置了capture之后,我们就可以控制它的顺序,让他从顶级元素向下进行冒泡执行
<div @click.capture="xx">1
<div @click.capture="xx">2
<div @click="xx">3
<div @click="xx">4
</div>
</div>
</div>
</div>
// 默认顺序是-> 4 3 2 1 设置了capture之后 -> 1 2 4 3
鼠标按钮修饰符
- .left 左键
- .right 右键
- .middle 中键
<button @click.right="show(1)">点击我</button>
键值修饰符
- .keycode
里面有vue提供的常用的按键别名,比如回车还有删除等等内容信息
<input type="text" @keyup.enter="" /> // 代表回车之后执行的操作