Comment utiliser v-on pour écouter les événements dans Vue

Vue est un framework JavaScript populaire qui est devenu un choix très populaire pour de nombreux développeurs. Il utilise un système réactif et une modularisation pour permettre aux développeurs de créer rapidement des applications frontales interactives. Parmi eux, l'instruction v-on est un outil très utile, qui permet aux développeurs de surveiller facilement divers événements dans les applications Vue. Cet article explique comment utiliser v-on pour écouter les événements dans Vue.

1. Utilisation de base de v-on

La commande v-on est en fait une abréviation de liaison d'événement. Elle peut surveiller les événements DOM, tels que les clics, les survols de la souris, les pressions sur le clavier, etc. Voici l'utilisation de base de v-on, en prenant comme exemple la surveillance des événements de clic :

<button v-on:click="handler">Click me</button>

Dans le code ci-dessus, nous utilisons l'instruction v-on pour écouter les événements de clic et lier l'événement à une méthode nommée handler. Lorsque l'utilisateur clique sur le bouton, la méthode du gestionnaire est déclenchée.

Vous pouvez également utiliser l'abréviation suivante :

<button @click="handler">Click me</button>

C'est l'abréviation de l'instruction v-on, et l'effet est exactement le même que le code ci-dessus.

2. Méthode de traitement des événements d'écoute

Généralement, nous devons définir manuellement une méthode dans l'instance Vue pour gérer l'événement. Le nom de la méthode peut être personnalisé et nous pouvons écrire des fonctions de traitement dans la méthode.

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

<script>
export default {
  methods: {
    handleClick: function (event) {
      // 处理点击事件
    }
  }
}
</script>

Dans le code ci-dessus, nous avons défini une méthode handleClick dans le composant Vue pour gérer les événements de clic. Lorsque l'utilisateur clique sur le bouton, cette méthode sera déclenchée et l'événement de l'objet événement sera transmis à la méthode comme seul paramètre. Dans la méthode, nous pouvons obtenir des informations sur l'événement via l'objet événement.

3. Passer les paramètres

Si nous devons transmettre des paramètres supplémentaires à la fonction de traitement, nous pouvons utiliser la syntaxe spéciale de l'instruction v-on.

<template>
  <button v-on:click="handleClick('参数1', '参数2')">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick: function (arg1, arg2) {
      // 处理点击事件，并使用arg1和arg2
    }
  }
}
</script>

Dans le code ci-dessus, nous avons transmis deux paramètres dans l'instruction, et ces deux paramètres seront transmis aux paramètres arg1 et arg2 dans la fonction handleClick. Notez que si nous devons utiliser des paramètres dynamiques, nous devons utiliser la syntaxe entre crochets.

4.Modificateurs

En plus de l'utilisation de base et du passage des paramètres, l'instruction v-on fournit également des modificateurs pour améliorer les capacités de traitement des événements.

4.1 Arrêter le bouillonnement des événements

Dans Vue, les événements peuvent bouillonner le long de l'arborescence des composants jusqu'à ce qu'ils atteignent le composant racine. Si nous devons empêcher l'événement de bouillonner, nous pouvons appeler la méthode stopPropagation() de l'objet Event dans la méthode de traitement des événements.

<template>
  <div v-on:click="outer">
    <div v-on:click="inner">
      Click me
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    inner: function (event) {
      event.stopPropagation()
    },
    outer: function () {
      console.log('outer')
    }
  }
}
</script>

Dans le code ci-dessus, nous avons appelé la méthode stopPropagation() dans l'événement click du sous-composant, empêchant ainsi l'événement de bouillonner. Si nous n'appelons pas cette méthode, l'événement click déclenchera tour à tour les fonctions de gestionnaire dans le composant enfant et le composant parent.

4.2 Empêcher le comportement par défaut

Dans Vue, la fonction de gestionnaire d'événements peut également appeler la méthode PreventDefault() de l'objet Event pour empêcher le comportement par défaut du navigateur. Par exemple, nous pouvons empêcher l’envoi d’un formulaire ou la redirection d’un lien.

<template>
  <form v-on:submit.prevent="submit">
    ...
  </form>
  <a href="https://www.google.com" v-on:click.prevent>Google</a>
</template>

<script>
export default {
  methods: {
    submit: function () {
      // 阻止表单的提交行为
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons le modificateur prévenir dans l'événement de soumission du formulaire, empêchant ainsi le comportement de soumission par défaut du formulaire. Dans l'événement click du lien, nous utilisons également le modificateur prévenir pour empêcher le lien de sauter.

4.3 Modificateurs de touches

Dans Vue, les événements peuvent être utilisés avec des touches. Si nous voulons uniquement déclencher un événement lorsqu'une touche spécifique est enfoncée, nous pouvons utiliser des modificateurs de touche.

<template>
  <input v-on:keyup.enter="submit">
</template>

<script>
export default {
  methods: {
    submit: function () {
      // 处理键盘的回车事件
    }
  }
}
</script>

Dans le code ci-dessus, nous pouvons utiliser le modificateur .enter dans l'événement keyup afin que le gestionnaire d'événements ne soit déclenché que lorsque la touche Entrée est enfoncée.

En résumé, l'instruction v-on est une instruction très utile, qui peut nous aider à surveiller très facilement divers événements dans les applications Vue. Lorsque nous utilisons l'instruction v-on, nous devons faire attention à l'utilisation de base, au passage des paramètres, des modificateurs, etc., afin de mieux utiliser cette instruction.

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!