Vue常用的修饰符有哪些有什么应用场景
修饰符是什么
在Vue
中,修饰符处理了许多DOM
事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理
分类、有5种
- 表单修饰符
- 事件修饰符
- 鼠标按键修饰符
- 键值修饰符
- v-bind修饰符
表单修饰符
在我们填写表单的时候用得最多的是input
标签,指令用得最多的是v-model
关于表单的修饰符有如下:
- lazy
- trim
- number
lazy
在我们填完信息,光标离开标签的时候,才会将值赋予给value
,也就是在change
事件之后再进行信息同步
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
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>
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
.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式
vue如果不加上这个会默认使用冒泡方式
<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
修饰符
vue的每个事件触发的时候都会先判断是否有阻止默认行为,
当我们定义一个scroll事件的时候,每次滚动的时候都会先判断是否阻止默认行为,会降低性能,显得不那么流畅。使用.passive就直接告诉浏览器,不用检测默认行为了,就会直接执行,可以提高性能
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
native
//孩子组件 这样vue会认为是一个自定义事件
<Child @click='onChildClick'>
//这样子写的话vue就会认为是点击事件了
<Child @click.native='onChildClick'>
鼠标按键修饰符
鼠标按钮修饰符针对的就是左键、右键、中键点击,有如下:
- left 左键点击
- right 右键点击
- middle 中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>
键盘修饰符
键盘修饰符是用来修饰键盘事件(keyup
,keydown
)的,有如下:
keyCode
存在很多,但vue
为我们提供了别名,分为以下两种:
- 普通键(enter、tab、delete、space、esc、up…)
- 系统修饰键(ctrl、alt、meta、shift…)