The 14 Vue modifiers interviewers like to ask

Preface

Hello everyone, I’m Lin Sanxin. As we all know, the modifier is also one of the important components of Vue. The use of the modifier can greatly improve the efficiency of development. Next, I will introduce you to the interviewer’s favorite question 13 Vue modifier

1.lazy

lazy modifier is that when the value of the input box is changed, the value will not change. When the cursor leaves the input box, the value bound to v-model

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

data() {
        return {
            value: '222'
        }
    }

2.trim

trim modifier is similar to the trim() method in JavaScript, which is to filter out the first and last spaces of the value bound by v-model

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

data() {
        return {
            value: '222'
        }
    }

3.number

number modifier is to convert the value into a number, but there are two cases when entering a string first and entering a number first

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

data() {
        return {
            value: '222'
        }
    }

If you enter the number first, only take the previous number part


If you enter the letters first, the number modifier is invalid

4.stop

stop modifier is to prevent bubbling

<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

The default event is bubbling from the inside out, and the capture works the other way around, captured

<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 role of the 061d26dc335d81 modifier is that only the click event bound itself will trigger the event

<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 modifier is that the event is executed only 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 modifier is to prevent default events (such as the jump of a tag)

<a href="#" @click.prevent="clickEvent(1)">点我</a>

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

9.native

native modifier is added to the event of the custom component to ensure that the event can be executed

执行不了
<My-component @click="shout(3)"></My-component>

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

10.left，right，middle

These three modifiers are events triggered by the left, middle, and right buttons of the mouse

<button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)">点我</button>

methods: {
        点击中键输出1
        点击左键输出2
        点击右键输出3
        clickEvent(num) {
            console.log(num)
        }
    }

11.passive

When we are listening to the element scroll event, the onscroll event will always be triggered. There is no problem on the PC side, but on the mobile side, our web page will become stuck. Therefore, when we use this modifier, it is equivalent to The onscroll event has a .lazy modifier

<div @scroll.passive="onScroll">...</div>

12.camel

不加camel viewBox会被识别成viewbox
<svg :viewBox="viewBox"></svg>

加了canmel viewBox才会被识别成viewBox
<svg :viewBox.camel="viewBox"></svg>

13.sync

When the parent component passes a value into the child component, and the child component wants to change this value, you can do so

父组件里
<children :foo="bar" @update:foo="val => bar = val"></children>

子组件里
this.$emit('update:foo', newValue)

sync modifier is that it can be abbreviated:

父组件里
<children :foo.sync="bar"></children>

子组件里
this.$emit('update:foo', newValue)

14.keyCode

When we write events like this, the event will be triggered no matter what button is pressed

<input type="text" @keyup="shout(4)">

So what should I do if I want to limit it to a certain key trigger? At this time, the keyCode modifier comes in handy

<input type="text" @keyup.keyCode="shout(4)">

KeyCode provided by Vue:

//普通键
.enter 
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift

For example (for specific key codes, please see key code correspondence table )

按 ctrl 才会触发
<input type="text" @keyup.ctrl="shout(4)">

也可以鼠标事件+按键
<input type="text" @mousedown.ctrl.="shout(4)">

可以多按键触发 例如 ctrl + 67
<input type="text" @keyup.ctrl.67="shout(4)">

Concluding remarks

I am Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends, fish together haha, fish school, add me, please note [think]