[TOC]
Form modifier
V-model Input is the most common two-way binding instruction, which realizes the real-time binding display of input and output
<div>
<input type="text" v-model="value">
<p>{{value}}</p>
</div>
Copy the code.lazy cursor leaves update
But sometimes we want to update the view after we have typed and the cursor has left, which is equivalent to the onchange event triggering the update.
<div>
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
</div>
Copy the code. Trim Filters the starting and ending Spaces
Can only filter the beginning and end of the space! Heads and tails, the ones in the middle don’t filter
<input type="text" v-model.trim="value">
Copy the code.number
If you enter numbers first, it will restrict you to only numbers. If you type in a string first, it’s like not adding dot number instead of just limiting the input number or converting the input to a number
Event modifier
. Stop Prevents events from bubbling
Because of the event bubble mechanism, when we bind a click event to an element, the parent click event is also triggered. Stopping the event from bubblingis equivalent to calling event.stopPropagation().
<div @click="shout(2)">
<button @click="shout(1)">ok</button>
</div>
//js
shout(e){
console.log(e)
}
//1
//2
Copy the code<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button> </divCopy the code.prevent Prevents the default behavior of the event
Default behavior used to block events, for example, blocking submission of forms when the submit button is clicked. The event.preventDefault() method is called.
<! <form V-on :submit. Prevent ="onSubmit"></form>
Copy the codeNote: You can use more than one modifier at a time, but the order may vary.
- Self blocks all clicks, whereas V-on :click.self. Prevent blocks only clicks on the element itself.
- Do not use.passive with.prevent, as.prevent will be ignored and the browser may show you a warning. Remember that.passive tells the browser that you do not want to block the event’s default behavior. That is, judging from left to right ~
.self Triggers by clicking on the element itself
The callback is triggered only if the event is triggered from the element itself to which the event is bound. So as you can see below, we just know from dot stop that the child is going to bubble up to the parent and trigger the parent’s click event, so when we add dot self, we click on the button and it doesn’t trigger the parent’s click event shout, It is only shout~ when you click on the parent element (blue background), which translates to ‘self, itself’, so we can see how this modifier is used
<div class="blue" @click.self="shout(2)">
<button @click="shout(1)">ok</button>
</div>
Copy the code. Once Triggers only once
This modifier can only be fired once after the event is bound, but not the second time.
<button @click.once="shout(1)">ok</button>
Copy the code. Capture Indicates the downward capture mode
The complete event mechanism is: capture stage – target stage – bubble stage.
By default, event triggers bubble up from the target. When you add.capture, it’s the other way around, and events are triggered from the top level that contains the element.
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
</div>
// 1 2 4 3
Copy the codeFrom the example above we can see the difference clearly when we click on obj4, obj1, obj2 fires in the capture phase, so 1 then 2, and then obj3, obj4 is the default bubble phase fire, so 4 then bubbles up to 3~
. Passive Rolling event delay
When we are listening for element scroll events, the OnScroll event will be triggered all the time, which is fine on the PC side, but on the mobile side, it will freeze our web page, so when we use this modifier, we are giving the onScroll event a lazy modifier
<! The default behavior of the scroll event (that is, the scroll behavior) will be triggered immediately --> <! Instead of waiting for 'onScroll' to finish --> <! -- This includes' event.preventdefault () '--> <div V-on :scroll.passive="onScroll">... </div>Copy the code.native converts to native events
We often write a lot of widgets, and some of them might be tied to events, but, Binding events like < my-component @click=”shout(3)”> are not triggered. Native is required to modify the click event. Manipulating normal HTML tags with the. Native modifier invalidates the event
Mouse button modifier
When we talked about the click event, we usually use the left button. Sometimes we need to change the right button menu, we need to use the right click or middle button click, and then we need to use the mouse button modifier
. Left Click
Right click
. Middle Middle click
<button @click.right="shout(1)">ok</button>
Copy the codeKey value modifier
This is actually one of the event modifiers, because it’s used to modify keyboard events, like onKeyUp, onKeyDown, etc
.keyCode
If we don’t use the keyCode modifier, we trigger shout every time we press the keyboard, which is useful when we want to specify that we need to press a key to trigger that shout, Specific key code to check the key and corresponding table https://zhidao.baidu.com/question/266291349.html
<input type="text" @keyup.keyCode="shout(4)">
Copy the codeFor ease of use, Vue provides aliases for some commonly used keys
The common key
.enter.tab.delete //(capture “delete” and “backspace” keys).space.ESc.up.down.left.right
System modifier key
.ctrl.alt.meta. Shift allows you to customize key modifier aliases using the global config.keyCodes object: // You can use v-on:keyup.f1 vue.config.keycodes. f1 = 112 When we write the following code, we see that the keyUP event cannot be triggered by using only the system modifier key. We need to link system modifier keys with other keycodes, such as so that when we press CTRL + C at the same time, the keyup event is triggered. Alternatively, if it is a mouse event, you can use system modifiers alone.
<button @mouseover.ctrl="shout(1)">ok</button>
<button @mousedown.ctrl="shout(1)">ok</button>
<button @click.ctrl.67="shout(1)">ok</button>
Copy the codeThat is, you cannot use the modifier of the system modifier key with one finger (at least two fingers, but more). You can use one finger to hold down the system modifier key and one finger to hold down another key to achieve keyboard events. Mouse events can also be achieved by holding the system modifier key with one finger and the mouse with the other hand.
.exact
We said the above system modifier keys, when we bind the click button press event like this, surprise, we press a few system modifier keys at the same time, such as CTRL shift click, can also trigger, there may be some scenarios only need or we can do is to press a system modifier keys to trigger (like making some shortcuts), It can’t be triggered when we press CTRL and other keys. So let me write it like this. Note: this is only limited to system modifier keys, you can still press CTRL + C, CTRL + V or CTRL + Normal after writing like this, but you can’t press CTRL + Shift + Normal to trigger. 8~
V – bind modifier
Sync (2.3.0 + added)
In some cases, we may need to “bidirectional bind, unidirectional modify” a prop. Unfortunately, true bidirectional binding creates maintenance problems, because the child cannot modify the parent directly, and there is no obvious source of change in either parent or child. The usual way of doing it was
// Parent component <comp :myMessage="bar" @update:myMessage="func"></comp> //js func(e){ this.bar = e; } // Child component jsfunc2(){
this.$emit('update:myMessage',params);
}
Copy the codeThe.sync modifier simplifies this step
// Parent <comp: mymessage.sync ="bar"></comp> // Child this.$emit('update:myMessage',params);
Copy the codeIt’s a lot easier, but there are a lot of caveats
1. To use sync, the event name passed by the sub-component must be update:value, which must be identical to the name declared in the props (myMessage, Note that v-bind with the.sync modifier cannot be used with expressions (e.g. V-bind :title. Sync = “doc.title + ‘! ‘” is invalid). Instead, you can only provide the name of the property you want to bind, similar to the V-Model. 3 Using v-bind.sync on a literal object, such as v-bind.sync= “{title: doc.title}”, does not work because there are many edge cases to consider when parsing a complex expression like this.
.prop
Property: Properties of a node object stored in memory that can be accessed and set. Attribute: One of the properties of a node object. The value is an object. Attributes can be read by point-access document.getelementById (‘xx’).attributes or document.getelementById (‘xx’).getAttributes(‘xx’), Add and modify document.getelementById (‘xx’).setAttribute(‘xx’,value). All attributes defined in the tag, including HTML attributes and custom attributes, are stored as key-value pairs in the Attributes object. Attribute and property are both translated as attributes, but javascript Advanced Programming translates them as properties and attributes to distinguish them
// Id,value, and style belong to property //index belongs to attribute //id and title are both attributes and features. If you modify an attribute, its corresponding feature will change. If you modify the property, the property will also change <input ID ="uid" title="title1" value="1" :index="index">
//input.index === undefined
//input.attributes.index === this.index
Copy the codeFrom the above we can see that if you use v-bind directly, the attribute is bound to the DOM node by default. To store variables through custom attributes, avoid exposing data and prevent contaminating HTML structures
<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined
Copy the code. Camel Camel displays attributes
Because HTML is case insensitive. < SVG :viewBox=”viewBox”>
will actually render as < SVG viewBox=”viewBox”>
this will cause the render to fail because the SVG tag only recognizes the viewBox and does not know what a viewBox is. If we use the. Camel modifier, it will be rendered as the camel name. In addition, if you use the string template, there are no such restrictions.
new Vue({
template: '<svg :viewBox="viewBox"></svg>'
})
Copy the codeThanks for sharing the reference, author of the article: Li Dalei segmentfault.com/a/119000001…