Vue modifier

The modifier is a half angle period "
”Indicates the special suffix used to indicate that an instruction should be bound in a special way

<form v-on:submit.prevent="onSubmit">...</form>

The. prevent modifier tells the v-on instruction to call event for the triggered event preventDefault()

Event modifier

Event modifier	describe
.stop	Prevent bubbling (prevent the event from continuing to pass to the superior DOM element)
.prevent	Prevent the occurrence of default events, which no longer reload the page Default events refer to actions that will be automatically executed by DOM operations, such as page jump when clicking hyperlink, page reload when clicking form submit button, etc. these events can be prevented by using ". prevent" modifier <a href=“www.baidu.com” @click. Prevent > Baidu</a> At this time, clicking the hyperlink will not jump to the page
.capture	Capture bubbles, that is, when bubbles occur, DOM elements with this modifier will be executed first. If there are multiple, execute them from outside to inside, and then execute the triggered events in a natural order Use the event capture mode, that is, the event triggered by the element itself is processed here first, and then handed over to the internal element for processing
.self	Bind the event to itself, which can only be triggered by itself. It is usually used to avoid the influence of bubbling event
.once	Setting events can only be triggered once, such as clicking a button
.passive	Tells the browser not to block the default behavior of the event
.native	Binding a native event to a child component in the parent component will turn the child component into an ordinary HTML tag. It cannot be triggered without ". Native" event

When using modifiers, order is important; The corresponding code will be generated in the same order. Therefore, use v-on: click prevent. Self will block all clicks, while v-on: click self. Prevent only blocks clicks on the element itself

<!-- Prevent click events from continuing to propagate -->
<a v-on:click.stop="doThis"></a>

<!-- Submitting an event no longer reloads the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- Modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- Only modifiers -->
<form v-on:submit.prevent></form>

<!-- Use event capture mode when adding event listeners -->
<!-- That is, the event triggered by the element itself is processed here first, and then handed over to the internal element for processing -->
<div v-on:click.capture="doThis">...</div>

<!-- Only when event.target Is the handler function triggered when the current element itself -->
<!-- That is, the event is not triggered from an internal element -->
<div v-on:click.self="doThat">...</div>

<!-- The click event will only be triggered once -->
<a v-on:click.once="doThis"></a>

<!-- Default behavior for scrolling events (Rolling behavior) Will be triggered immediately -->
<!-- Without waiting `onScroll` complete  -->
<!-- This includes `event.preventDefault()` Situation -->
<div v-on:scroll.passive="onScroll">...</div>

Keyboard events

@keydown (triggered when the keyboard is pressed), @ keypress (triggered when the keyboard is pressed), @ keyup (keyboard pops up)
Get the key code e.keyCode of the key

Keyboard time	describe
@keyup.13	press return
@keyup.enter	enter
@keyup.up	Up key
@keyup.down	Down key
@keyup.left	Left key
@keyup.right	Right click
@keyup.delete	Delete key

Dynamic command parameters (new in 2.6.0)

Starting from 2.6.0, JavaScript expressions enclosed in square brackets can be used as parameters of an instruction

<a v-bind:[attributeName]="url"> ... </a>

Note: there are some constraints on the writing of parameter expressions
The attributeName here will be dynamically evaluated as a JavaScript expression, and the obtained value will be used as the final parameter.
For example, if the Vue instance has a data property attributeName with a value of "href", the binding will be equivalent to v-bind:href.

Similarly, dynamic parameters can be used to bind the processing function for a dynamic event name:

<a v-on:[eventName]="doSomething"> ... </a>

In this example, when the value of eventName is "focus", v-on:[eventName] will be equivalent to v-on:focus

Value constraints of dynamic parameters
The dynamic parameter is expected to find a string, and the value is null in case of exception. This special null value can be explicitly used to remove the binding. Any other value of non string type will trigger a warning.

Constraints on dynamic parameter expressions
Dynamic parameter expressions have some syntactic constraints because some characters, such as spaces and quotation marks, are invalid in HTML attribute names. For example:

<!-- This triggers a compilation warning -->
<a v-bind:['foo' + bar]="value"> ... </a>

The solution is to use an expression without spaces or quotation marks, or replace this complex expression with a calculated attribute.

When using a template in DOM (writing a template directly in an HTML file), you also need to avoid using uppercase characters to name the key name, because the browser will force all attribute names to lowercase:

<a v-bind:[someAttr]="value"> ... </a>

Note: when using the template in DOM, this code will be converted to "v-bind:[someattr]". The code will not work unless there is a property named "someattr" in the instance

Event modifier

Calling event. in event handler Preventdefault() or event Stoppropagation () is a very common requirement. Although this can be easily implemented in methods, it is better that methods only have pure data logic, rather than dealing with DOM event details

To solve this problem, Vue JS provides event modifiers for v-on. As mentioned earlier, modifiers are represented by the instruction suffix beginning with a dot

Modifier	describe
.stop	Prevent the event from spreading
.prevent	Block label default behavior
.capture	Use event capture mode. That is, the event triggered by the element itself is processed here first, and then handed over to the internal element for processing
.self	Only in event Target is the processing function triggered when the current element itself
.once	The event will only be triggered once
.passive	Tell the browser that you don't want to block the default behavior of the event

When using modifiers, order is important; The corresponding code will be generated in the same order.
Therefore, use v-on: click prevent. Self will block all clicks, while v-on: click self. Prevent only blocks clicks on the element itself

<!-- Prevent click events from continuing to propagate -->
<a v-on:click.stop="doThis"></a>

<!-- Submitting an event no longer reloads the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- Modifiers can be concatenated -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- Only modifiers -->
<form v-on:submit.prevent></form>

<!-- Use event capture mode when adding event listeners -->
<!-- That is, events triggered by internal elements are processed here first, and then handed over to internal elements for processing -->
<div v-on:click.capture="doThis">...</div>

<!-- Only when event.target Is the handler function triggered when the current element itself -->
<!-- That is, the event is not triggered from an internal element -->
<div v-on:click.self="doThat">...</div>

once event modifier (added in 2.1.4)
Unlike other modifiers that work only on native DOM events The once modifier can also be used on custom component events

<!-- The click event will only be triggered once -->
<a v-on:click.once="doThis"></a>

passive event modifier (new in 2.3.0)
Vue also provides for the passive option in addEventListener Passive modifier.

The. passive modifier can especially improve the performance of the mobile terminal.
Note: don't put the Passive and Use with prevent because Prevent will be ignored and the browser may show you a warning. Remember The default browser will tell you that passive doesn't want to block events

<!-- The default behavior for scrolling events (i.e. scrolling behavior) will be triggered immediately -->
<!-- Without waiting `onScroll` complete  -->
<!-- This includes `event.preventDefault()` Situation -->
<div v-on:scroll.passive="onScroll">...</div>

Next: Vue instance