Propriété methods de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue3,methodsLa propriété est un objet utilisé pour définir des méthodes disponibles dans le composant. Ces méthodes peuvent être invoquées dans le template du composant via une liaison d'événement ou d'autres moyens.

methodsLa propriété est généralement utilisée pour gérer les interactions utilisateur, exécuter certaines opérations logiques ou déclencher des comportements du composant.

Syntaxe de base pour utiliser la propriété methods

Dans un composant Vue3,methodsLa propriété est généralementsetupDéfinie en dehors de la fonction. Elle contient un objet, où chaque paire clé-valeur représente une méthode : la clé est le nom de la méthode, et la valeur est l'implémentation de la méthode.

Exemple

export default {
  methods: {
    methodName() {
      // Logique de la méthode
    },
    anotherMethod() {
      // Logique d'une autre méthode
    }
  }
}

Exemple : déclencher une méthode lorsqu'un bouton est cliqué

Ce qui suit est un exemple simple montrant comment utiliser l'methodspropriété pour gérer les événements de clic sur les boutons.

Exemple

<template>
  <div>
    <button @click="handleClick">Cliquez-moi</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
message: 'Bonjour, Vue3 !'
    };
  },
  methods: {
    handleClick() {
this.message = 'Le bouton a été cliqué !';
    }
  }
};
</script>

Analyse de code

  1. Section du template：

    • Utilisation@clickliaison d'événementhandleClickassocie la méthode à l'événement de clic du bouton.
    • Lorsque l'utilisateur clique sur le bouton,handleClickla méthode sera invoquée.

  2. Section du script：

    • dataLa fonction retourne un objet contenant lamessagepropriété, qui est utilisée pour stocker le message affiché.
    • methodsDans l'objet se trouve unehandleClickméthode, qui modifiemessagela valeur de.

But de la propriété methods

  1. Gérer les interactions utilisateur：

    • methodsLa propriété est couramment utilisée pour répondre aux interactions de l'utilisateur telles que les clics, la saisie, etc.

  2. Exécuter des opérations logiques：

    • Du code logique complexe peut être écrit dans methods, comme des calculs de données, des évaluations conditionnelles, etc.

  3. Déclencher des comportements de composant：

    • Via des appels de méthodes, des comportements tels que les mises à jour de l'état du composant et les requêtes de données peuvent être déclenchés.

Différences entre methods et computed

  • methods：

    • À chaque fois qu'elle est appelée, le code dans le corps de la méthode est exécuté.
    • Convient à la gestion d'événements ou aux opérations qui doivent être déclenchées manuellement.

  • calculé：

    • Il ne sera recalculé que lorsque les données dont il dépend changent.
    • Convient aux scénarios dans lesquels les résultats doivent être calculés dynamiquement en fonction des données.

Exercice

  1. Essayez demethodsajouter une nouvelle méthode pour effacer lemessagecontenu de.
  2. Modifiez le code d'exemple pour que l'heure actuelle s'affiche lorsque le bouton est cliqué.

Vue3 选项式 APIVue3 API des options

Autres extensions