Vue modifiers are often used in vUE components, but I forgot to use them today. Let’s summarize the event modifiers in VUE.

Event modifier

  • .self
  • .stop
  • .capture
  • .prevent
  • .once
  • .passive

.self

The handler is fired only when the event.target is the current element itself, i.e. the event is not fired from an internal element: To close the popover, add the. Self modifier to the outer layer of the mask, so that the inside of the popover does not trigger the click event of the mask, and add the. Stop modifier to the inner click event of the mask.

.stop

Description: Prevent event bubbling Function: Prevent events from bubbling to the outer layer, triggering the outer event

.capture

Meaning: Add event listener using event capture mode, that is, events triggered by internal elements are processed here first, and then passed to internal elements for processing purpose: events triggered by internal elements are processed here first

<div v-on:click.capture="clickEvent">... </div>Copy the code

.prevent

The. Prevent modifier blocks the default event, such as form’s Submit event, from refreshing the page by default

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

When using modifiers, order is important; The corresponding code is generated in the same order. Therefore, using V-on :click.prevent. Self blocks all clicks by default, whereas V-on :click.self. Prevent blocks only clicks by default on the element itself.

.once

Version: 2.1.4 New Meaning: The event is executed only once Purpose: The event is executed only once

Note: Unlike other modifiers, which only work on native DOM events, the.once modifier can also be used on custom component events.

.passive

Version: 2.3.0 Added Meaning: onScroll will not wait for the listener to finish executing the default behavior (listener execution is time-consuming, some even time-consuming, which will lead to page lag) Purpose:.passive modifier can improve the performance of mobile terminals.

<! The default behavior of the scroll event (that is, the scroll behavior) will be triggered immediately --> <! - and not wait`onScroll`Complete - > <! -- this includes`event.preventDefault()`-- > the condition of the<div v-on:scroll.passive="onScroll">.</div>
Copy the code

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.

If you still don’t understand passive, another article will explain it in detail.