1 EinleitungBeim Erstellen einer Vue-Instanz können Sie ein Optionsobjekt übergeben const vm = neuer Vue({ Daten: { Nachricht: 'Hallo' }, berechnet: {}, Methoden: {}, betrachten: {} }) Dieses Optionsobjekt kann zahlreiche Optionen (oder Attribute) angeben. Zu den datenbezogenen Optionen zählen unter anderem Unter ihnen können 2 Grundlegende Bedienung Verwenden Sie <!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8" /> <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" /> <title>Methoden</title> <!-- Importiere vue.js --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </Kopf> <Text> </body> <Skript> </Skript> </html> 2.1 Methoden Die in der <Text> <div id="Beispiel"> <!-- Anzeige: a:1 --> <p>ein:{{ plus() }}</p> </div> </body> <Skript> const vm = neuer Vue({ el: "#Beispiel", Daten: { eine: 0, }, Methoden: { plus: Funktion () { gib dies zurück.a + 1; }, }, }); console.log(vm); // Sehen Sie sich die Konsolenausgabe der VM an. Sie können sehen, dass sie eine Methode hat: plus: ƒ (), ⚠️Beachten Sie, dass es sich um eine Methode handelt console.log(vm.plus()); // Greifen Sie direkt über die VM-Instanz auf die Methode zu. Ausgabe: 1 </Skript> Die Funktion in 2.2 Berechnete Eigenschaften Die in der <Text> <div id="Beispiel"> <!-- Anzeige: a:1 --> <p>a:{{ plus }}</p> </div> </body> <Skript> const vm = neuer Vue({ el: "#Beispiel", Daten: { eine: 0, }, berechnet: { plus: Funktion () { gib dies zurück.a + 1; }, }, }); console.log(vm); // // Überprüfen Sie die VM-Ausgabe der Konsole. Sie können sehen, dass sie ein Attribut hat: plus:1, ⚠️Beachten Sie, dass es ein Attribut ist</script> Auf den ersten Blick scheinen die Tatsächlich wird der Unterschied zwischen den beiden durch das Drucken der VM-Instanz und der Zugriffsmethode widergespiegelt:
Darüber hinaus können berechnete Eigenschaften im Gegensatz zu Methoden reaktionsfähig aktualisiert werden, wenn sich die Daten ändern, von denen sie abhängen, d. h. wenn sich eine ändert, wird auch 2.3 Zuhörer ansehen Das Schlüssel-Wert-Paar in der Während des <Text> <div id="Beispiel"> <!-- Anzeige: a:1 --> <p>ein:{{ ein }}</p> </div> </body> <Skript> const vm = neuer Vue({ el: "#Beispiel", Daten: { eine: 0, }, betrachten: a: Funktion () { console.log("a hat sich geändert"); // Da sich der Wert von a geändert hat, wird die Rückruffunktion ausgeführt console.log(this.a); }, }, }); vm.a = 1; // Ändere hier manuell den Wert von a</script> 3 Unterschiede zwischen den drei 3.1 Methoden vs. berechnete EigenschaftenNeben den beiden unter 2.2 genannten Unterschieden ist der wichtigste Unterschied:
Die folgende Tabelle fasst die Unterschiede zwischen den beiden zusammen:
3.2 Berechnete Eigenschaften vs. Listener
Wenn ein Wert aus einem oder mehreren Daten berechnet werden muss, verwenden Sie eine berechnete Eigenschaft Die Listening-Eigenschaft wird hauptsächlich verwendet, um Änderungen eines bestimmten Werts zu überwachen und dann die erforderliche logische Verarbeitung durchzuführen. Darüber hinaus ist die Listening-Eigenschaft nützlicher, wenn bei Datenänderungen asynchrone oder kostspielige Vorgänge ausgeführt werden müssen. Konkrete Beispiele finden Sie im Vue-Dokument - Listener Dies ist das Ende dieses Artikels über die Unterschiede zwischen Vues Das könnte Sie auch interessieren:
|
<<: Verwendung von Kubernetes YAML-Dateien
>>: Zusammenfassung der Erfahrungen mit der browserübergreifenden Entwicklung (I) HTML-Tags
1. Technische Punkte Vite-Version vue3 ts Integri...
1. MySQL installieren # Laden Sie MySQL im Docker...
Zunächst müssen Sie einige Eigenschaften von HTML...
Dies ist ein großes Dropdown-Menü, das rein in CS...
1. Kompatibilität Wie unten dargestellt: Die Komp...
Umfassende Dokumentation GitHub-Adresse https://g...
Inhaltsverzeichnis Die Groß-/Kleinschreibung von ...
Inhaltsverzeichnis 1. Fremdschlüsseleinschränkung...
Ich habe einmal versprochen, dass ich so lange wei...
Inhaltsverzeichnis Einführung Anweisungen Tatsäch...
Inhaltsverzeichnis Übergeordnete Komponente kommu...
Vorbereiten: Downloadadresse für das MySQL 8.0 Wi...
Dieser Artikel erläutert anhand von Beispielen di...
Inhaltsverzeichnis Was ist eine Mindmap? Wie zeic...
Es gibt zwei Versionen der MySQL-Datenbankverwalt...