vue learning --vue modifier

First, the event modifier

vue provides a modifier for the event or @ v-on way to call modifiers by point (.) suffix of instruction. The v-on: click.stop.

.stop prevent the event from bubbling out

.prevent prevent the default behavior

.capture event bubbling change event capture mode

.self only trigger their default behavior, which means that only e.target === e.currentTarget will be performed.

.once performed only once, followed by real-time data changes I no longer re-rendered.

.passive prevent the scroll bar behavior (commonly used in the mobile end)

.native (native event listener components of the root element, the main component is added to the custom of native events)

Event modifier in series: <a v-on:click.stop.prevent="doThis"> </a> 

Second, the form modifier

This modifier is the role of the v-model form tag. The v-model.lazy

.lazy triggered after the change (that is to say only when the cursor leaves the input value input box will change)

.number the output string to Number type * (although type defines the type is the type of number, but if the input string, the output is string)

.trim trailing spaces are automatically filtered user input

Third, the keyboard modifiers

.enter: Enter key after typing, pressing enter will only trigger content


.tab: Tab key
.delete: containing the backspace key and delete
.esc: Back key
.space: spacebar
.up: up key
.down: Down keys
.left: Left arrow
.right: Right

Fourth, the system modifiers

 Can be used as a modifier to achieve only trigger a mouse or keyboard event listener in the only press the corresponding button.

.ctrl
.alt
.shift
.meta

Such as:  typing time, while pressing the shift to be useful.

Note: This modifier necessary to press two keys at the same time to be useful.

Fifth, mouse modifiers

.left
.right


.middle

Six custom modifier key aliases

 

 

Published 70 original articles · won praise 13 · views 9735

Guess you like

Origin blog.csdn.net/qq_38588845/article/details/104994690