Vue3 methods-Eigenschaft

Vue3 选项式 APIVue3 Options API

In Vue3,methodsDie Eigenschaft ist ein Objekt, das verwendet wird, um in der Komponente verfügbare Methoden zu definieren. Diese Methoden können im Template der Komponente über Ereignisbindung oder auf andere Weise aufgerufen werden.

methodsDie Eigenschaft wird normalerweise verwendet, um Benutzerinteraktionen zu behandeln, bestimmte logische Operationen auszuführen oder Komponentenverhalten auszulösen.

Grundlegende Syntax für die Verwendung der methods-Eigenschaft

In einer Vue3-Komponente,methodsDie Eigenschaft wird normalerweisesetupaußerhalb der Funktion definiert. Sie enthält ein Objekt, wobei jedes Schlüssel-Wert-Paar eine Methode darstellt: Der Schlüssel ist der Methodenname und der Wert ist die Implementierung der Methode.

Beispiel

export default {
  methods: {
    methodName() {
      // Methodenlogik
    },
    anotherMethod() {
      // Logik einer anderen Methode
    }
  }
}

Beispiel: Auslösen einer Methode beim Klicken auf eine Schaltfläche

Das Folgende ist ein einfaches Beispiel, das zeigt, wie man diemethodsEigenschaft zur Behandlung von Button-Klick-Ereignissen.

Beispiel

<template>
  <div>
    <button @click="handleClick">Klick mich</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
message: 'Hallo, Vue3!'
    };
  },
  methods: {
    handleClick() {
this.message = 'Der Button wurde geklickt!';
    }
  }
};
</script>

Codeanalyse

  1. Template-Bereich：

    • Verwendung@clickEreignisbindunghandleClickverknüpft die Methode mit dem Klick-Ereignis des Buttons.
    • Wenn der Benutzer auf den Button klickt,handleClickwird die Methode aufgerufen.

  2. Skript-Bereich：

    • dataDie Funktion gibt ein Objekt zurück, das diemessageEigenschaft enthält, die zum Speichern der angezeigten Nachricht verwendet wird.
    • methodsIm Objekt definiert ist einehandleClickMethode, die modifiziertmessageder Wert von.

Zweck der methods-Eigenschaft

  1. Benutzerinteraktionen verarbeiten：

    • methodsDie Eigenschaft wird häufig verwendet, um auf Benutzerinteraktionen wie Klicks, Eingaben usw. zu reagieren.

  2. Logische Operationen ausführen：

    • In methods kann komplexer Logikcode geschrieben werden, wie Datenberechnungen, bedingte Prüfungen usw.

  3. Komponentenverhalten auslösen：

    • Durch Methodenaufrufe können Verhaltensweisen wie Aktualisierungen des Komponentenstatus und Datenanfragen ausgelöst werden.

Unterschiede zwischen methods und computed

  • methods：

    • Jedes Mal, wenn sie aufgerufen wird, wird der Code im Methodenkörper ausgeführt.
    • Geeignet für die Ereignisbehandlung oder für Vorgänge, die manuell ausgelöst werden müssen.

  • berechnet：

    • Es wird nur neu berechnet, wenn sich die abhängigen Daten ändern.
    • Geeignet für Szenarien, in denen Ergebnisse dynamisch anhand von Daten berechnet werden müssen.

Übung

  1. Versuchen Sie,methodseine neue Methode hinzuzufügen, um denmessageInhalt von.
  2. Ändern Sie den Beispielcode so, dass die aktuelle Uhrzeit angezeigt wird, wenn auf die Schaltfläche geklickt wird.

Vue3 选项式 APIVue3 Options API

Weitere Erweiterungen