preface

Have you ever come across code like this when you’re writing code?

Xiao Ling hereby went to investigate and found that this is actually a modifier of Vue. At the same time, it is also an important component of Vue, the use of modifiers can greatly improve the development efficiency, but also can reduce a lot of unnecessary code. Here’s a list of 14 Vue modifiers you’ll use in your development.

1.lazy

As the name implies, the lazy modifier does not change the binding’s lazyValue until the cursor moves away from the input field.

<! --html-->
<input type="text" v-model.lazy="lazyValue">
<div>{{lazyValue}}</div>
<! --data-->
data() {
    return {
        lazyValue:"100"
    }
  }
Copy the code

2.tirm

The trim modifier removes leading and trailing whitespace from v-Model bound values. In the actual development, we generally use the content modification of the search box to filter out the situation that the content cannot be checked due to the blank space before and after the user enters many times.

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

data() {
    return {
        trimValue:"100"
    }
  },
Copy the code

3.number

The number modifier converts a value to a number, but entering a string first and entering a number first are two different cases.

If you enter a number first, only the preceding number is taken

The number modifier is invalid if you enter a letter first

You can also do this with type=’number’.

Of course, there is a problem, such as when we normally need to enter a price that controls two decimal places (the price cannot be negative and only two decimal places need to be kept). Xiao Ling usually uses the following methods to achieve:

<! -- Allow decimal input (two decimal digits)-->
<input type="text" onkeyup="value=value.replace(/^\D*(\d*(? : \ \ d {0, 2})?) .*$/g, '$1')" > 
Copy the code

4.stop

The stop modifier prevents events from bubbling.

<div class="out-box" @click="clickEvent(2)" >Trigger output 2<div class="in-box" @click.stop="clickEvent(1)">Trigger output 1</div>
 </div>Methods: {// clickEvent(num){console.log(' start output :'+num); }},Copy the code

5.capture

Event bubbles bubble from the inside out by default, and the Capture modifier works the other way around, capturing from the outside in.


<div class="out-box" @click.capture="clickEvent(2)" >Trigger output 2<div class="in-box" @click="clickEvent(1)">Trigger output 1</div>
</div>

Copy the code

As you can see from the results, clicking on the inner DIV event bubbles up and reverses. It prints a 2, it prints a 1.

6.self

The self modifier causes the event to fire only when the binding itself is clicked.

<div class="out-box" @click.self="clickEvent(2)" >Trigger output 2<div class="in-box" @click="clickEvent(1)">Trigger output 1</div>
</div>
Copy the code

You can see that only 2 fires but not 1.

7.once

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

<div class="out-box" @click="clickEvent(2)" >Trigger output 2<div class="in-box" @click.once="clickEvent(1)">Trigger output 1</div>
    </div>
Copy the code

As you can see in the demo, the div bound to once fires once and then doesn’t fire again (but the event still bubbles).

8.prevent

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

<a href="http://www.w3school.com.cn" @click.prevent="clickEvent(1)">Click on the A TAB</a>
Copy the code

As you can see, clicking the A tag does not trigger the native jump event.

9.native

Native modifiers are added to custom component events to ensure that the event can be executed.

<! Emit click event: emit click event: emit click event: emit click event
<Child @click="clickEvent(1)"></Child>
<! -- Can execute -->  
<Child @click.native="clickEvent(1)"></Child>
Copy the code

You can see that a component that does not use Native and has no emit Click event does not fire an event.

10. Left, right, middle

The. Left,. Right, and. Middle modifiers are events triggered by the left, middle, and right mouse buttons.

<div class="out-box" @click.left="clickEvent('left')" @click.middle="clickEvent('middle')" @click.right="clickEvent('right')">The mouse keys are triggered</div>
Copy the code

11.sync

When a parent component passes a value to a child component and the child wants to change the value (normally an error will be reported if you change it directly), you can do this.

<Child  :childValue="trimValue" @changeChildValue="value=>trimValue = value"></Child>
<! --child-->Methods: {changeChildValue(){this.$emit('update:childValue', 'childValue')}},Copy the code

It’s a little bit more common and it’s a little bit more complicated. So we introduce.sync.

<! -- Parent component -->
<Child  :childValue.sync="trimValue" ></Child>
<! -- Subcomponent -->Methods: {changeChildValue(){this.$emit('update:childValue', 'childValue')}},Copy the code

12.keyCode

The. KeyCode modifier is used to trigger events using keys. One of the most commonly used projects is the carriage return trigger search function.

 <p>.keyCode</p>
<input type="text" @keyup[keyCode] ="clickEvent('keyCode')">
Copy the code

Vue provides keyCode:

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

Can also be triggered by key code, specific key code:

Keymodifier aliases can be customized using the global config.keyCodes object:

// You can use 'V-on :keyup.f1'
Vue.config.keyCodes.f1 = 112
Copy the code

13.passive

The passive modifier is used to add a lazy modifier to the onScroll event. It’s fine on the PC side, but on the mobile side, it makes our web pages get jammed. So we’re going to use it this way.

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

14.camel

Since HTML is case insensitive, the. Camel modifier allows the v-bind attribute name to be humped when using DOM templates, such as the viewBox attribute of SVG: will actually be rendered as

<svg viewbox="viewbox"></svg>
Copy the code

This will cause rendering to fail because the SVG tag only recognizes the viewBox, but does not know what a viewBox is.

<! -- Add canmel to viewBox to identify it as viewBox--> 
<svg :viewBox.camel="viewBox"></svg>
Copy the code

The problem

Q: Can there be two modifiers, such as click.self.stop?

A: can you

<div class="out-box" @click.stop.prevent="clickEvent(2)" ></div>
Copy the code

The.stop and. Prevent modifiers are triggered.

conclusion

This article refers to the article of Brother Sanxin:

The 13 Vue modifiers interviewers Love to ask about

And added some of their own understanding and practical operation.

Project address: github.com/FireSmallPa…