13 Most Frequently Asked Vue Modifiers in Interviews

1. lazy
2.trim
3.number
4.stop
5. capture
6.self
7.once
8.Prevent
9.native
10.left, right, middle
11. Passive
12. camel
12.sync
13.keyCode

1. lazy

The lazy modifier is used to change the value of the input box. The value of the v-model binding will not change when the cursor leaves the input box.

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

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

2.trim

The trim modifier is similar to the trim() method in JavaScript, which filters out the leading and trailing spaces of the value bound to v-model.

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

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

3.number

The function of the number modifier is to convert the value into a number, but there are two different situations: entering the string first and entering the number first.

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

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

If you enter numbers first, only the first part of the numbers will be taken. If you enter letters first, the number modifier will be invalid.

4.stop

The stop modifier is used to stop bubbling

<div @click="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click.stop="clickEvent(1)">Click</button>
</div>

methods: {
 clickEvent(num) {
  // Click the button without stop to output 1 2
  // Added stop and clicked the button to output 1
  console.log(num)
 }
}

5. capture

By default, events bubble from the inside out. The capture modifier works the other way around, capturing events from the outside.

<div @click.capture="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">Click</button>
</div>

methods: {
 clickEvent(num) {
  // Without capture, click the button to output 1 2
  // Added capture and clicked the button to output 2 1
  console.log(num)
 }
}

6.self

The self modifier is used to trigger the event only when the event binding itself is clicked.

<div @click.self="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">Click</button>
</div>
methods: {
 clickEvent(num) {
  // Without adding self, click the button to output 1 2
  // Added self. Clicking the button will output 1. Clicking the div will output 2.
  console.log(num)
 }
}

7.once

The once modifier is used to execute the event only once.

<div @click.once="clickEvent(2)" style="width:300px;height:100px;background:red">
    <button @click="clickEvent(1)">Click</button>
</div>

methods: {
 clickEvent(num) {
  // Without once, click the button multiple times to output 1
  // Added once. Clicking the button multiple times will only output 1 once 
  console.log(num)
 }
}

8.Prevent

The prevent modifier is used to prevent default events (such as the jump of the a tag)

<a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">Click me</a>

methods: {
 clickEvent(num) {
  // Without prevent, click on label a to jump first and then output 1
  // Added prevent, clicking on label a will not jump but will only output 1
  console.log(num)
 }
}

9.native

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

Cannot execute

<My-component @click="shout(3)"></My-component>

Can execute

<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)">Click me</button>

methods: {
 // Click the middle button to output 1
 // Click the left button to output 2
 // Right click to output 3
 clickEvent(num) {
  console.log(num)
 }
}

11. Passive

When we listen to the scroll event of an element, the onscroll event will be triggered continuously. This is no problem on the PC side, but on the mobile side, it will make our web page become stuck. Therefore, when we use this modifier, it is equivalent to giving the onscroll event a .lazy modifier.

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

12. camel

Without camel viewBox, it will be recognized as viewbox
<svg :viewBox="viewBox"></svg>

Only after adding canmel viewBox will it be recognized as viewBox
<svg :viewBox.camel="viewBox"></svg>

12.sync

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

In the parent component

<children :foo="bar" @update:foo="val => bar = val"></children>

In the subcomponent

this.$emit('update:foo', newValue)

The function of the sync modifier is to abbreviate:

In the parent component

<children :foo.sync="bar"></children>

In the subcomponent

this.$emit('update:foo', newValue)

13.keyCode

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

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

So what if you want to limit it to a certain button trigger? This is where the keyCode modifier comes in handy

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

KeyCode provided by Vue:

//Ordinary key.enter 
.tab
.delete //(captures the "delete" and "backspace" keys)
.space
.esc
.up
.down
.left
.right
//System modifier key.ctrl
.alt
.meta
.shift

For example:

Press ctrl to trigger

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

You can also use mouse events + buttons

<input type="text" @mousedown.ctrl.="shout(4)">

Can trigger with multiple keys, such as ctrl + 67

<input type="text" @

This concludes this article about the 13 most frequently asked Vue modifiers in interviews. For more relevant Vue modifiers, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Event modifiers in Vue: once, prevent, stop, capture, self, passive
Detailed explanation of the use of Vue event modifier capture
The difference between .capture and .self in Vue and a preliminary understanding

<<: VM VirtualBox virtual machine mount shared folder

>>: Detailed explanation of Nginx timeout configuration