vue修饰符
表单修饰符:
1、lazy:懒加载
<input type="text" v-model="projectName" /> {{ projectName }}
此时输入框执行的事件是input事件,实时同步(双向绑定)
<input type="text" v-model.lazy="projectName" /> {{ projectName }}
此时输入框执行的事件是change事件,当光标离开input框后触发(解除双向绑定)
注意:.lazy对elementUI的el-input不起作用,vant的van-field也不起作用
2、trim:去除首尾空格
<el-input v-model.trim="projectName">
3、number:将输入的字符转为数字,就是输入0-9时会自动转为数字,在el-input中会禁止输入数字外的其他字符,但是如果第一个输入的字符不是字符型数字,那么相当于没加 .number,所以这是个垃圾
<input type="text" v-model.number="projectName"/>
如果想禁止输入数字外其他字符:限制input框只能输入数字
注意:这3个修饰符可以一起用,但是要注意lazy在el-input中不起作用
<input type="text" v-model.lazy.trim.number="projectName"/>
事件修饰符:
1、stop:阻止事件冒泡
<button @click.stop="handleClick"></button>
2、prevent:阻止默认事件
<div style="width:50px;height:50px;background:red;" @click="click1"> <div style="width:30px;height:40px;background:blue;" @click.prevent="click2"> <a href="https://www.baidu.com/" target="_blank" @click="aClick">百度</a> </div> </div>
此时阻止了a连接的跳转,.prevent加给a标签或者两个div都可以阻止。
注意:修饰符可以使用多个,@click.prevent.self会阻止所有的点击,@click.self.prevent只会阻止自己的点击
3、self:不受冒泡影响,加了 .self后只有点击自己才会触发
<div style="width:50px;height:50px;background:red;" @click.self="click1"> <div style="width:30px;height:40px;background:blue;" @click="click2"> <a href="https://www.baidu.com/" target="_blank" @click="aClick">百度</a> </div> </div>
4、once:只触发一次,第二次点击无效
<div style="width:50px;height:50px;background:red;" @click.once="click1"> <div style="width:30px;height:40px;background:blue;" @click.once="click2"> <a href="https://www.baidu.com/" target="_blank" @click.once="aClick">百度</a> </div> </div>
5、capture:正常的事件机制是捕获-目标-冒泡,而加了capture修饰符后,在捕获阶段就会触发事件
<div style="width:50px;height:50px;background:red;" @click="click1"> <div style="width:30px;height:30px;background:blue;" @click.capture="click2"> <div style="width:10px;height:10px;background:yellow;" @click="click3"></div> </div> </div>
谁加了 .capture,谁就从事件机制中抽出来最先执行,剩下的按照事件机制顺序执行
如果都加了 .capture,就按照事件机制相反的顺序执行
如果是加了一部分,未加一部分,加了 .capture的抽出来按照事件机制相反顺序先执行,剩下的按照以此按照事件机制执行
6、native:给组件绑定事件,将组件转化成普通的html标签
<aaa @click.native="click4"></aaa>
注意:不能用 .native修饰html标签
鼠标按钮修饰符:
1、left:左键
2、middle:中键 只有按下中键才会触发
3、right:右键
<div style="width:50px;height:50px;background:red;" @click.middle="click1"> <div style="width:30px;height:30px;background:blue;" @click="click2"> <div style="width:10px;height:10px;background:yellow;" @click="click3"></div> </div> </div>
键盘修饰符:
按下任意键,抬起时都会触发keyup事件:
<input type="text" @keyup="keyup(100)">
普通键:
.enter
.tab
.delete(delete键和back键)
.space
.esc
.up
.down
.left
.right
系统修饰键:
.ctrl
.shift
.alt
.meta
使用普通键时:也可以写成@keyup.13='hendleKeyup'
<input type="text" @keyup.enter="keyup(100)">
使用系统修饰键时:需要和其他键码(可以写enter也可以写13)连接起来一起使用才有效
<input type="text" @keyup.meta.enter="keyup(100)">
自定义键值修饰符:main.js中:
Vue.config.keyCodes = { f1: 112, f2: 113, f4: 114 }
exact修饰符:
用来限制系统修饰符(ctrl、shift、alt、meta):
<!-- 只要按下ctrl键点击时就会触发 --> <div @click.ctrl="click1"></div> <!-- 按下ctrl键点击时触发,同时按下其他系统修饰符(shift、alt、meta)则不会触发 --> <div @click.ctrl.exact="click1"></div> <!-- 没有任何系统修饰符按下时点击触发 --> <div @click.exact="click1"></div>
注意:
1、@click.exact:事件只要带了exact修饰符,按下系统修饰符就不执行
2、@click.exact.ctrl:事件带了exact修饰符,但是加上ctrl修饰符,此时必须要按下ctrl修饰符并且不能按下其他系统修饰符才能执行
.lazy----<input type="text" v-model.lazy="value">----在光标离开后input框才会更新数据
.trim----<input type="text" v-model.trim="value">----输入框过滤首尾的空格
.number----<input type="text" v-model.number="value">----加了number修饰符后,如果先输入的是数字,表示这个输入框只能输入数字,如果先输入了字符串,等于这个输入框没有加number修饰符,所以这个修饰符就是个垃圾,还是得用正则判断
事件修饰符:
.stop----<button @click.stop="test"></button>----阻止事件冒泡
.prevent----<a @click.prevent="test"></a>----组件浏览器默认事件
.self----<div @click.self="test"></div>----只有点击到元素本身才会触发----bug:@click.self阻止了自身的点击,必须要点击到padding区域才行
.once----<div @click.once="test"></div>----只有第一次点击有效
.capture----<div @click.capture="test(1)"> <button @click="test(2)">test</button></div>----先1后2----事件机制是捕获-目标-冒泡,capture是倒过来
.passive----<div v-on:scroll.passive="onScroll">...</div>----滚动事件会立即触发,每次滚动都有一个默认事件触发,加了passive就是告诉浏览器,不需要查询,不需要触发这个默认事件
.native----<My-component @click.native="test"></My-component>----给组件绑定原生事件,给vue组件绑定事件的时候,必须加上 .native ,否则会认为监听的是来自子组件自定义的事件,等同于在子组件内部处理click事件后向外发送click事件($emit())
.left .right .middle----<button @click.right="test">test</button>----鼠标点击的时候触发
按键修饰符:.enter .esc .left .right .up .dowm .tab .delete .scape----<input type="text" @keyup.enter="test">
.keyCode----<input type="text" @keyCode(13)="test">