Analyse du traitement des événements dans Vue

Cet article partage avec vous l'analyse du traitement des événements dans Vue. Les amis dans le besoin peuvent s'y référer.

Objectif :

1. Maîtrise des méthodes de surveillance des événements, familier avec les méthodes de traitement des événements et divers modificateurs d'événements

2. Comprendre le sens des événements d'écoute en html

Événements d'écoute (v-on)

1. est similaire à l'ordinaire, comme v-on:click ou @click est équivalent à onclick ordinaire, v-on appelle les méthodes dans les méthodes de l'instance vue

2. v-on peut non seulement appeler des méthodes, mais également exécuter certaines expressions js La formule <.>

3. peut accéder à l'événement DOM de l'élément en passant la variable spéciale $event

Modificateur d'événement

1. Modifier

   .stop // Empêcher la propagation des événements
   .prevent // Empêcher le comportement par défaut
   .capture // Utiliser le mode de capture d'événement (traitez-le vous-même d'abord, puis transférez-le aux éléments internes pour traitement)
   .self // Déclenché lorsque event.target est l'élément courant lui-même (ceux provoqués par d'autres éléments ne prendront pas effet)
   .once // Ne peut être déclenché qu'une seule fois
   .passive // ​​​​Laissez le comportement par défaut se déclencher immédiatement
   

2. le modificateur est ajouté après le nom de l'événement et peut être concaténé, ou seul le modificateur

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

Modificateur d'événement de touche

1. Événement de clavier

@keydown // Événement de pression sur le clavier
@keyup // Événement de relâchement du clavier

2. Modificateur (alias de touche)

.enter
.tab
.delete (capture les touches "supprimer" et "retour arrière")
.esc
.space
.up
.down
.left
.right

De plus, vous pouvez personnaliser l'alias du modificateur de clé via l'objet global config.keyCodes :

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

3. Modification de la combinaison de contrôle du système

.ctrl
.alt
.shift
.meta

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

Pourquoi écouter les événements en HTML

Essentiellement, toutes les méthodes et expressions de gestion des événements Vue.js sont strictement liées à la vue actuelle

sur le ViewModel et l'utilisation de v-on présente les avantages suivants :

1. Il est pratique de visualiser les événements liés par le modèle et de localiser facilement la méthode correspondante dans le code js

2. Pas besoin de lier manuellement les événements avec js, découplé de dom, facile à tester

3. Lorsqu'un ViewModel est détruit, tous les gestionnaires d'événements le feront être automatiquement supprimé, pas besoin de Effacer.

Recommandations associées :

Analyse de la liaison et des conditions de classe et de style et du rendu de liste dans Vue

Analyse de la syntaxe du modèle Vue, des propriétés calculées et des écouteurs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!