锐客网

  1. 首页 > 睿知 > it技术 > >

「百毒不侵」面试官最喜欢问的13种Vue修饰符

IT知识面试官vue修饰符修饰符

千金一刻莫空度，老大无成空自伤。这篇文章主要讲述「百毒不侵」面试官最喜欢问的13种Vue修饰符相关的知识，希望能为你提供帮助。
前言大家好，我是林三心，众所周知，??修饰符??也是Vue的重要组成成分之一，利用好??修饰符??可以大大地提高开发的效率，接下来给大家介绍一下??面试官最喜欢问的13种Vue修饰符??

1.lazy??lazy??修饰符作用是，改变输入框的值时value不会改变，当光标离开输入框时，??v-model??绑定的值value才会改变

< input type="text" v-model.lazy="value">
< div> {{value}}< /div>

data() {
return {
value: 222
}
}

【「百毒不侵」面试官最喜欢问的13种Vue修饰符】
2.trim??trim??修饰符的作用类似于javascript中的??trim()??方法，作用是把??v-model??绑定的值的首尾空格给过滤掉。
< input type="text" v-model.trim="value">
< div> {{value}}< /div>

data() {
return {
value: 222
}
}


3.number??number??修饰符的作用是将值转成数字，但是先输入字符串和先输入数字，是两种情况
< input type="text" v-model.number="value">
< div> {{value}}< /div>

data() {
return {
value: 222
}
}

先输入数字的话，只取前面数字部分

先输入字母的话，??number??修饰符无效

4.stop??stop??修饰符的作用是阻止冒泡
< div @click="clickEvent(2)" style="width:300px; height:100px; background:red">
< button @click.stop="clickEvent(1)"> 点击< /button>
< /div>

methods: {
clickEvent(num) {
不加 stop 点击按钮输出 1 2
加了 stop 点击按钮输出 1
console.log(num)
}
}

5.capture事件默认是由里往外??冒泡??，??capture??修饰符的作用是反过来，由外网内??捕获??
< div @click.capture="clickEvent(2)" style="width:300px; height:100px; background:red">
< button @click="clickEvent(1)"> 点击< /button>
< /div>

methods: {
clickEvent(num) {
不加 capture 点击按钮输出 1 2
加了 capture 点击按钮输出 2 1
console.log(num)
}
}

6.self??self??修饰符作用是，只有点击事件绑定的本身才会触发事件
< div @click.self="clickEvent(2)" style="width:300px; height:100px; background:red">
< button @click="clickEvent(1)"> 点击< /button>
< /div>

methods: {
clickEvent(num) {
不加 self 点击按钮输出 1 2
加了 self 点击按钮输出 1 点击div才会输出 2
console.log(num)
}
}

7.once??once??修饰符的作用是，事件只执行一次
< div @click.once="clickEvent(2)" style="width:300px; height:100px; background:red">
< button @click="clickEvent(1)"> 点击< /button>
< /div>

methods: {
clickEvent(num) {
不加 once 多次点击按钮输出 1
加了 once 多次点击按钮只会输出一次 1
console.log(num)
}
}

8.prevent??prevent??修饰符的作用是阻止默认事件（例如a标签的跳转）
< a href="https://www.songbingjia.com/android/#" @click.prevent="clickEvent(1)"> 点我< /a>

methods: {
clickEvent(num) {
不加 prevent 点击a标签 先跳转然后输出 1
加了 prevent 点击a标签 不会跳转只会输出 1
console.log(num)
}
}

9.native??native??修饰符是加在自定义组件的事件上，保证事件能执行
执行不了
< My-component @click="shout(3)"> < /My-component>

可以执行
< My-component @click.native="shout(3)"> < /My-component>

10.left，right，middle这三个修饰符是鼠标的左中右按键触发的事件
< button @click.middle="clickEvent(1)"@click.left="clickEvent(2)"@click.right="clickEvent(3)"> 点我< /button>

methods: {
点击中键输出1
点击左键输出2

    推荐阅读


    上一篇：[实战教学]将log.error的日志输送到钉钉群告警

    下一篇：Pandas学习笔记02- 数据处理高阶用法