前言
大家是否在平时写代码的时候遇到过这样的代码?
小凌特此去研究了一下,其实这是Vue的修饰符
。同时它也是Vue的重要组成成分之一,利用好修饰符可以大大地提高
开发效率的同时,也可以减少
很多不必要的代码。接下来给大家整理了一下平时开发常用到的14种Vue修饰符。
1.lazy
顾名思义,lazy
修饰符作用是,改变输入框的值时绑定的lazyValue不会改变,当光标离开输入框时,v-model
绑定的值lazyValue才会改变。
<!--html-->
<input type="text" v-model.lazy="lazyValue">
<div>{{lazyValue}}</div>
<!--data-->
data() {
return {
lazyValue:"100"
}
}
复制代码
2.tirm
trim
修饰符的作用是把v-model绑定的值的首尾空格
给去掉。在实际开发中我们一般用于搜索框的内容修饰,过滤
掉用户多输入前后空格导致内容查不出来的情况。
<input type="text" v-model.trim="trimValue">
<div>{{trimValue}}</div>
data() {
return {
trimValue:"100"
}
},
复制代码
3.number
number
修饰符的作用是将值转成数字,但是先输入字符串和先输入数字,是两种情况。
先输入数字的话,只取前面数字部分
先输入字母的话,
number
修饰符无效
当然大家也可以通过type='number'
来实现这个功能。
当然这会遇到一个问题,比如我们平时需要输入控制两位小数的价格时,就会有问题(价格不允许是负数且只需要保留两位小数)。小凌平时会用以下方法来实现:
<!--允许输入小数(两位小数)-->
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
复制代码
4.stop
stop
修饰符的作用是阻止事件冒泡
。
<div class="out-box" @click="clickEvent(2)" >
触发输出2
<div class="in-box" @click.stop="clickEvent(1)">触发输出1</div>
</div>
methods: {
// 点击事件
clickEvent(num){
console.log('出发输出:'+num);
}
},
复制代码
5.capture
事件冒泡默认是由里往外冒泡,capture
修饰符的作用是反过来,由外往内捕获。
<div class="out-box" @click.capture="clickEvent(2)" >
触发输出2
<div class="in-box" @click="clickEvent(1)">触发输出1</div>
</div>
复制代码
可以从结果中看到,点击内部div事件冒泡进行了反转。先输出了2,再输出1。
6.self
self修饰符作用是,只有点击事件绑定的本身才会触发事件。
<div class="out-box" @click.self="clickEvent(2)" >
触发输出2
<div class="in-box" @click="clickEvent(1)">触发输出1</div>
</div>
复制代码
可以看到只触发了2 没有触发1.
7.once
once
修饰符的作用是,事件只执行一次。
<div class="out-box" @click="clickEvent(2)" >
触发输出2
<div class="in-box" @click.once="clickEvent(1)">触发输出1</div>
</div>
复制代码
从演示中我们可以看到,绑定once
的div在触发一次事件后就不会再触发了(但是还是会事件冒泡)。
8.prevent
prevent
修饰符的作用是阻止默认事件(例如a标签的跳转)
<a href="http://www.w3school.com.cn" @click.prevent="clickEvent(1)">点击A标签</a>
复制代码
可以看到,点击了a标签,也没有触发原生的跳转事件。
9.native
native
修饰符是加在自定义组件的事件上,保证事件能执行。
<!--子组件要是没有emit click事件 就执行不了-->
<Child @click="clickEvent(1)"></Child>
<!--可以执行-->
<Child @click.native="clickEvent(1)"></Child>
复制代码
可以看到未使用native
且自生没有emit click事件的组件并没有触发事件。
10.left,.right,.middle
.left
,.right
,.middle
这三个修饰符是鼠标的左中右按键触发的事件.
<div class="out-box" @click.left="clickEvent('left')" @click.middle="clickEvent('middle')" @click.right="clickEvent('right')">鼠标各键触发</div>
复制代码
11.sync
当父组件传值进子组件,子组件想要改变这个值时(一般直接修改会报错),可以这么做。
<Child :childValue="trimValue" @changeChildValue="value=>trimValue = value"></Child>
<!--child-->
methods: {
changeChildValue(){
this.$emit('update:childValue', '子修改过的值')
}
},
复制代码
这种情况比较常见切写法比较复杂。于是我们引出 .sync
。
<!--父组件-->
<Child :childValue.sync="trimValue" ></Child>
<!--子组件-->
methods: {
changeChildValue(){
this.$emit('update:childValue', '子修改过的值')
}
},
复制代码
12.keyCode
.keyCode修饰主要用于使用按键触发事件。再项目中用的最多的就是回车触发搜索功能。
<p>.keyCode</p>
<input type="text" @keyup[keyCode]="clickEvent('keyCode')">
复制代码
Vue提供的keyCode:
//普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift
复制代码
也可以通过键码去触发,具体键码:
可以通过全局 config.keyCodes 对象自定义按键修饰符别名:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
复制代码
13.passive
.passive修饰符主要用于给onscroll事件加一个类似.lazy的修饰符。 在pc端是没啥问题的,但是在移动端,会让我们的网页变卡。因此我们要这么使用。
<div @scroll.passive="onScroll">...</div>
复制代码
14.camel
由于HTML特性是不区分大小写的,.camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化,例如 SVG 的 viewBox 属性:实际会被渲染为
<svg viewbox="viewbox"></svg>
复制代码
这将导致渲染失败,因为 SVG 标签只认 viewBox,却不知道 viewbox 是什么。
<!--加了canmel viewBox才会被识别成viewBox-->
<svg :viewBox.camel="viewBox"></svg>
复制代码
问题
Q:能不能两个修饰符,比如click.self.stop?
A:可以
<div class="out-box" @click.stop.prevent="clickEvent(2)" ></div>
复制代码
就可以触发 .stop
、.prevent
两个修饰符。
结语
本文参考三心哥文章:
并加上了一些自己的理解和实际操作。