Événements Vue.js

Vue.js nous permet d'intercepter n'importe quel événement DOM en utilisant la directive v-on sur un élément. Cette rubrique est essentielle pour rendre un composant interactif


Que sont les événements Vue.js

Vue.js nous permet d'intercepter n'importe quel événement DOM en utilisant lev-ondirective sur un élément.

Si nous voulons faire quelque chose lorsqu'un événement de clic se produit dans cet élément:

<template>
  <a>Click me!</a>
</template>

on ajoute unv-ondirectif:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

Vue propose également une syntaxe alternative très pratique pour cela:

<template>
  <a @click="handleClick">Click me!</a>
</template>

Vous pouvez choisir d'utiliser les parenthèses ou non.@click="handleClick"est équivalent à@click="handleClick()".

handleClickest une méthode attachée au composant:

<script>
export default {
  methods: {
    handleClick: function(event) {
      console.log(event)
    }
  }
}
</script>

Les méthodes sont expliquées plus en détail dans monTutoriel sur les méthodes Vue.

Ce que vous devez savoir ici, c'est que vous pouvez passer des paramètres à partir d'événements:@click="handleClick(param)"et ils seront reçus à l'intérieur de la méthode.

Accéder à l'objet événement d'origine

Dans de nombreux cas, vous souhaiterez effectuer une action sur l'objet événement ou rechercher une propriété dans celui-ci. Comment pouvez-vous y accéder?

Utilisez le spécial$eventdirectif:

<template>
  <a @click="handleClick($event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(event) { console.log(event) } } } </script>

et si vous passez déjà une variable:

<template>
  <a @click="handleClick('something', $event)">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(text, event) { console.log(text) console.log(event) } } } </script>

De là, vous pouvez appelerevent.preventDefault(), mais il existe un meilleur moyen: les modificateurs d'événements

Modificateurs d'événements

Au lieu de jouer avec les «choses» DOM dans vos méthodes, dites à Vue de gérer les choses pour vous:

  • @click.preventappelerevent.preventDefault()
  • @click.stopappelerevent.stopPropagation()
  • @click.passiveutilise leoption passive de addEventListener
  • @click.captureutilise la capture d'événement au lieu du bullage d'événement
  • @click.selfassurez-vous que l'événement de clic ne provient pas d'un événement enfant, mais s'est produit directement sur cet élément
  • @click.oncel'événement ne sera déclenché qu'une seule fois

Toutes ces options peuvent être combinées en ajoutant un modificateur après l'autre.

Pour en savoir plus sur la propagation, le bouillonnement / la capture, consultez monGuide des événements JavaScript.

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: