Analysis of event processing in Vue

This article shares with you the analysis of event processing in Vue. Friends in need can refer to it.

Goal:

1. Proficient in event monitoring methods, familiar with event processing methods and various event modifiers

2. Understand The meaning of listening events in html

Listening events (v-on)

1. is similar to ordinary on, such as v-on:click or @click is equivalent to ordinary onclick, v-on calls the methods in the vue instance methods.

2. v-on can not only call methods, but also execute some js expressions Formula

3. You can access the DOM event of the element by passing in the special variable $event

Event modifier

1. Modifier
   .stop // Prevent event propagation
   .prevent // Prevent default behavior
   .capture // Use event capture mode (process it yourself first, and then hand it over to internal elements for processing)
   .self // Triggered when event.target is the current element itself (those caused by other elements will not take effect)
   .once // Can only be triggered once
   .passive // ​​Let the default behavior trigger immediately

2. The modifier is added after the event name, and can be concatenated, or only the modifier

例如: <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>

Key event modifier

1. Keyboard event
@keydown // Keyboard press event
@keyup // Keyboard release event

2. Modifier (key alias)
.enter
.tab
.delete (captures the "delete" and "backspace" keys)
.esc
.space
.up
.down
.left
.right

In addition, you can customize the key modifier alias through the global config.keyCodes object:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

3. System control combination modification
.ctrl
.alt
.shift
.meta

 <!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<p @click.ctrl="doSomething">Do something</p>

Why listen to events in HTML

Essentially all Vue.js event handling methods and expressions are strictly bound to the ViewModel of the current view
Using v-on has the following benefits:

1. It is convenient to view the events bound by the template and to easily locate the corresponding method in the js code

2. No need to manually bind events with js, decoupled from dom, easy to test

3. When a ViewModel is destroyed, all event handlers will be automatically deleted without clearing.

Related recommendations:

Analysis of class and style binding and conditional and list rendering in Vue

Template for Vue Syntax, computed properties, listener analysis

The above is the detailed content of Analysis of event processing in Vue. For more information, please follow other related articles on the PHP Chinese website!