Comment Vue gère-t-il les événements ? Introduction aux connaissances de base pertinentes

Cet article vous présentera les connaissances de base du traitement des événements Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

La gestion des événements Vue est un aspect nécessaire de chaque projet Vue. Il est utilisé pour capturer les entrées des utilisateurs, partager des données et de nombreuses autres façons créatives. [Recommandations associées : "Tutoriel vue.js"]

Dans cet article, nous présenterons les connaissances de base et fournirons quelques exemples de code pour gérer les événements. Il ne contient que les astuces/méthodes que je trouve les plus utiles. Pour une analyse approfondie de tout ce que Vue peut faire, consultez la documentation de Vue.

Gestion de base des événements

En utilisant la directive v-on (@ en abrégé), nous pouvons écouter les événements DOM et exécuter des méthodes de gestion ou du Javascript en ligne.

// v-on 指令
<div v-on:click=&#39;handleClick&#39; />

// OR

<div @click=&#39;handleClick&#39; />

Émettre des événements personnalisés aux composants parents

Un cas d'utilisation courant dans n'importe quel framework Web est de vouloir que les composants enfants puissent émettre des événements vers leurs composants parents, ce qui est également le principe de deux liaison de données à sens unique. Un exemple courant de

consiste à envoyer des données d'un composant input vers un formulaire parent.

La syntaxe d'émission des événements est différente selon que l'on utilise l'API Options ou l'API Composition.

Dans l'API Options, on peut simplement appeler this.$emit(eventName, payload) , par exemple :

export default {
  methods: {
    handleUpdate: () => {
      this.$emit('update', 'Hello World')
    }
  }
}

Cependant, l'API Composition est utilisée différemment. Vous devez utiliser la méthode setup fournie par Vue3. emit

Tant que l'objet contextuel est importé, vous pouvez appeler

avec les mêmes paramètres que l'API Options. emit

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit('update', 'Hello World')
    }

    return { handleUpdate }
  } 
}

Bien sûr, j'utilise souvent la déconstruction dans mes projets :

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit('update', 'Hello World')
    }

    return { handleUpdate }
  } 
}

Parfait !

Que l'on utilise l'API Options ou Composition, la façon dont le groupe parent écoute est la même.

<HelloWorld @update=&#39;inputUpdated&#39;/>

Tout d'abord, nous pouvons accéder à la valeur transmise en utilisant $event dans le modèle.

S'il y a une valeur transmise dans la méthode d'émission du composant, nous pouvons la capturer de deux manières différentes, selon que nous utilisons inline ou méthode.

La première consiste à utiliser

dans le modèle pour accéder à la valeur transmise. $event

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>

Deuxièmement, utilisez une méthode pour gérer l'événement, puis la valeur transmise sera automatiquement transmise à notre méthode comme premier paramètre.

<HelloWorld @update=&#39;inputUpdated&#39;/>

// ...

methods: {
    inputUpdated: (value) => {
      console.log(value) // WORKS TOO
    }
}

Modificateurs de souris

Voici la liste des principaux événements de souris du DOM que nous pouvons capturer dans la directive

 : v-on

<div 
  @mousedown=&#39;handleEvent&#39;
  @mouseup=&#39;handleEvent&#39;
  @click=&#39;handleEvent&#39;
  @dblclick=&#39;handleEvent&#39;
  @mousemove=&#39;handleEvent&#39;
  @mouseover=&#39;handleEvent&#39;
  @mousewheel=&#39;handleEvent&#39;
  @mouseout=&#39;handleEvent&#39;
>
Interact with Me!
</div>

Pour les événements de clic, nous pouvons également ajouter Modificateurs d'événements de souris pour limiter le bouton de la souris qui déclenchera notre événement. Il y en a trois :

, left et right. middle

<!-- 这只会触发鼠标左键 -->
<div @mousedown.left=&#39;handleLeftClick&#39;> Left </div>

Modificateurs de clavier

Nous pouvons écouter trois événements de clavier DOM :

<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keypress=&#39;handleKeyPressed&#39;
   @keydown=&#39;handleKeyDown&#39;
   @keyup=&#39;handleKeyUp&#39;
/>

Habituellement, nous voulons détecter ces événements sur une certaine touche, il y a deux façons de le faire ça fais ça.

• codes clés

• Vue a des alias pour certaines touches (

  , enter, tab, delete, esc, space, up, down, left)right

<!-- Trigger even when enter is released -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.enter=&#39;handleEnter&#39;
/>

<!-- OR -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.13=&#39;handleEnter&#39;
/>

Modificateurs système

Pour certains projets, nous pouvons simplement vouloir que l'événement soit déclenché lorsque le l'utilisateur appuie sur une touche de modification. Les touches de modification sont similaires à

ou Command. shift

Dans Vue, il existe quatre modificateurs système.

• shift

• alt

• ctrl

• meta (CMD sur mac, touche Windows sous Windows)

Ceci est utile pour créer des éléments tels que des raccourcis clavier personnalisés dans les applications Vue.

<!-- 自定义快捷方式，杨使用Shift + 8 创建列表 -->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56=&#39;createList&#39;
/>

Dans la documentation Vue, il existe également un modificateur

pour garantir que l'événement n'est déclenché que lorsque la touche que nous spécifions est enfoncée et aucune autre touche. exact

<!-- 自定义快捷方式，只有Shift + 8 这两个按下时才会创建列表-->
<input
   type=&#39;text&#39;
   placeholder=&#39;Type something&#39;
   @keyup.shift.56.exact=&#39;createList&#39;
/>

Modificateurs d'événement

Pour tous les événements DOM, nous pouvons utiliser certains modificateurs pour modifier la façon dont ils se déroulent. Que ce soit pour arrêter la propagation ou empêcher les actions par défaut, Vue dispose de deux modificateurs d'événements DOM intégrés.

<!-- 阻止默认行为 -->
<form @submit.prevent>

<!-- 阻止冒泡 -->
<form @submit.stop=&#39;submitForm&#39;>

<!-- 阻止默认行为和冒泡 -->
<form @submit.stop.prevent=&#39;submitForm&#39;>

<!-- 防止事件被多次触发 -->
<p @close.once=&#39;handleClose&#39;>

Adresse originale en anglais : https://segmentfault.com/a/1190000039938779

Auteur : Fernando Doglio

Traducteur : Front-end Xiaozhi

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

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!