preface

Hello everyone, MY name is Lin Sanxin. As we all know, modifiers are also one of the important components of Vue. Good use of modifiers can greatly improve the efficiency of development

1.lazy

The lazy modifier is used to change the value of the input box without changing the value. The value bound to the V-Model is changed only when the cursor moves away from the input box

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

data() {
        return {
            value: '222'}}Copy the code

2.trim

The trim modifier acts like the trim() method in JavaScript. It filters out the first and last whitespace of the v-Model bound value.

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

data() {
        return {
            value: '222'}}Copy the code

3.number

The number modifier is used to convert a value to a number, but there are two ways to enter a string first and a number first

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

data() {
        return {
            value: '222'}}Copy the code

If you enter a number first, only take the first digit

The number modifier is invalid if you enter a letter first

4.stop

The stop modifier is used to stop bubbles

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

methods: {
        clickEvent(num){click the button output without stop1 2Add stop and click the output button1
            console.log(num)
        }
    }
Copy the code

5.capture

Events are bubbling from the inside out by default. The capture modifier works the other way around, capturing events from the inside out

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

methods: {
        clickEvent(num){click the output button without capture1 2Add capture and click the output button2 1
            console.log(num)
        }
    }
Copy the code

6.self

The self modifier is used to trigger an event only if the event binding itself is clicked

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

methods: {
        clickEvent(num){click button output without self1 2I added self and I hit the button to output1You have to click on div to print2
            console.log(num)
        }
    }
Copy the code

7.once

The once modifier is used to execute an event only once

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

methods: {
        clickEvent(num){output by clicking the button multiple times without once1If you click the button multiple times, it will only print once1 
            console.log(num)
        }
    }
Copy the code

8.prevent

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

<a href="#" @click.prevent="clickEvent(1)"> </a> methods: {clickEvent(num){without Prevent, click on the A TAB to jump and output1If you click on the A tag, it will not jump, it will only output1
            console.log(num)
        }
    }
Copy the code

9.native

The native modifier is added to a custom component event to ensure that the event will be executed

Cannot execute < my-component @click="shout(3)"></ my-component >< my-component @click.native="shout(3)"></My-component>
Copy the code

10. Left, right, middle

These three modifiers are events that are triggered by the left, center and right mouse buttons

<button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)"> < span style = "box-sizing: border-box; color: RGB (74, 74, 74)1Left click output2Right click output3
        clickEvent(num) {
            console.log(num)
        }
    }
Copy the code

11.passive

So when we’re listening for an element scroll event, we’re always raising an onScroll event, which is fine on the PC, but on the mobile side, it’s going to cause our webpage to get stuck, so when we use this modifier, we’re just adding a.lazy modifier to the onScroll event

<div @scroll.passive="onScroll">... </div>Copy the code

12.camel

ViewBox < SVG :viewBox="viewBox">< span style = "max-width: 100%; clear: both"viewBox"></svg>
Copy the code

12.sync

This is done when a parent component passes a value into a child component and the child component wants to change the value

<children :foo= in the parent component"bar" @update:foo="val => bar = val">< span style = "box-sizing: border-box; color: RGB (74, 74, 74)this.$emit('update:foo', newValue)
Copy the code

What the sync modifier does is, for short,

<children :foo.sync= in the parent component"bar">< span style = "box-sizing: border-box; color: RGB (74, 74, 74)this.$emit('update:foo', newValue)
Copy the code

13.keyCode

When we write an event like this, whatever button we press will trigger the event, right

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

What if you want to restrict it to a button trigger? This is where the keyCode modifier comes in

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

Vue provides keyCode:

/ / common key
.enter 
.tab
.delete // capture "delete" and "backspace" keys.
.space
.esc
.up
.down
.left
.right
// System modifiers
.ctrl
.alt
.meta
.shift
Copy the code

For example (see key code mapping table for details)

Press CTRL to trigger <input type="text" @keyup.ctrl="shout(4)"<input type="text" @mousedown.ctrl.="shout(4)"> can be triggered by multiple keys such as CTRL +67
<input type="text" @keyup.ctrl67.="shout(4)">
Copy the code

conclusion

My column has been updated:

  • Vue source parsing
  • Leetcode
  • Element source parsing
  • Interview — poison is poison

Study group please click here and arrange it now