The lazy modifier is that the value will not change when changing the input box value. When the cursor leaves the input box, the value value bound by v-model will change.
<input type="text" ="value">
<div>{{value}}</div>
data() {
return {
value: '111111'
}
}
The trim modifier functions similar to the trim() method in JavaScript, which is to filter out the beginning and end spaces of the value bound by v-model.
<input type="text" ="value">
<div>{{value}}</div>
data() {
return {
value: '111111'
}
}
The function of the number modifier is to convert the value into a number, but inputting the string first and inputting the number first are two cases.
<input type="text" ="value">
<div>{{value}}</div>
data() {
return {
value: '111111'
}
}
If you enter the number first, only the previous number part
If you enter the letter first, the number modifier is invalid
The stop modifier is to prevent bubbles
<div @click="clickEvent(2)" style="width:300px;height:100px;background:red">
<button @="clickEvent(1)">Click</button>
</div>
methods: {
clickEvent(num) {
// No stop click the button to output 1 2 // Added stop and click the button to output 1 (num)
}
}
The event is bubbling from inside to outside by default. The function of the capture modifier is to be captured by the external network.
<div @="clickEvent(2)" style="width:300px;height:100px;background:red">
<button @click="clickEvent(1)">Click</button>
</div>
methods: {
clickEvent(num) {
// Click the button to output 1 2 // Add capture and click the button to output 2 1 (num)
}
}
The function of the self modifier is that only the event binding itself will trigger the event
<div @="clickEvent(2)" style="width:300px;height:100px;background:red">
<button @click="clickEvent(1)">Click</button>
</div>
methods: {
clickEvent(num) {
// Click the button to output 1 2 // Add self click button to output 1 Click div to output 2 (num)
}
}
The function of the once modifier is that the event is executed only once.
<div @="clickEvent(2)" style="width:300px;height:100px;background:red">
<button @click="clickEvent(1)">Click</button>
</div>
methods: {
clickEvent(num) {
// No one click multiple times to output 1 // Add once, click the button multiple times and output only once 1 (num)
}
}
The function of the prevent modifier is to prevent default events (such as jumps to a tag)
<a href="#" rel="external nofollow" @="clickEvent(1)">Click me</a>
methods: {
clickEvent(num) {
// Without prevent click on the a tag, jump first and then output 1 // Added prevent and click on the a tag. It will not jump and will only output 1 (num)
}
}
The native modifier is added to the event of the custom component to ensure that the event can be executed.
Can't execute
<My-component @click="shout(3)"></My-component>
Can be executed
<My-component @="shout(3)"></My-component>
，right，middle
These three modifiers are events triggered by the left, center and right buttons of the mouse
<button @="clickEvent(1)" @="clickEvent(2)" @="clickEvent(3)">Click me</button>
methods: {
// Click the middle key to output 1 // Click the left button to output 2 // Right click to output 3 clickEvent(num) {
(num)
}
}
When we are listening to element scroll events, the onscroll event will be triggered all the time. There is no problem on the PC side, but on the mobile side, our web page will become a card. Therefore, when we use this modifier, it is equivalent to a .lazy modifier for the onscroll event.
<div @="onScroll">...</div>
No additioncamel viewBoxWill be identified asviewbox <svg :viewBox="viewBox"></svg> addcanmel viewBox才Will be identified asviewBox <svg :="viewBox"></svg>
When the parent component passes the value into the child component and the child component wants to change this value, you can do this
In parent component
<children :foo="bar" @update:foo="val => bar = val"></children>
In subcomponents
this.$emit('update:foo', newValue)
The function of the sync modifier is to abbreviate it:
In parent component
<children :="bar"></children>
In subcomponents
this.$emit('update:foo', newValue)
When we write events like this, no matter what button we press, the event will be triggered
<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" @="shout(4)">
KeyCode provided by Vue:
//Normal key.enter .tab .delete //(Capture the "Delete" and "Backspace" keys).space .esc .up .down .left .right //System Modification Key.ctrl .alt .meta .shift
For example:
Press ctrl to trigger
<input type="text" @="shout(4)">
Mouse event + keys can also be used
<input type="text" @.="shout(4)">
Multiple keys can be triggered, for example, ctrl + 67
<input type="text" @
This is the article about the 13 most frequently asked Vue modifiers in interviews. For more related Vue modifier content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!