Directive v-on de Vue3

Vue3 内置指令Vue3 Directives intégrées

v-onLa directive est utilisée pour lier des écouteurs d'événements et peut écouter les événements DOM ou les événements personnalisés.

Description de base

v-onLa directive est utilisée pour lier des fonctions de gestion d'événements aux éléments. Elle peut être utilisée pour écouter les événements DOM natifs, ainsi que les événements émis par des composants personnalisés.

  • Abréviation: @
  • Type attendu: Fonction | Instruction en ligne | Objet
  • Fonction: Lie les écouteurs d'événements, prend en charge les événements DOM natifs et les événements personnalisés.

Utilisation de base

Exemple

<!-- Syntaxe complète -->
<button v-on:click="handleClick">Cliquez</button>

<!-- Raccourci -->
<button @click="handleClick">Cliquez</button>

Exemple

<template>
  <div>
    <button @click="count++">Augmenter</button>
    <p>Nombre : {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  }
}
</script>

Modificateurs d'événement

Exemple

<!-- Empêcher la propagation des événements -->
<button @click.stop="handleClick">Arrêter la propagation</button>

<!-- Empêcher le comportement par défaut -->
<form @submit.prevent="handleSubmit">
  <button type="submit">Envoyer</button>
</forme>

<!-- Déclencher à l'appui sur la touche Entrée -->
<input @keyup.enter="handleEnter" placeholder="Appuyez sur Entrée pour soumettre" />

Vue3 内置指令Vue3 Directives intégrées

Autres extensions