Vue-Studiennotizen (2) – Vue-Einführung

Dieser Artikel teilt einen Teil der Einführung in Vue mit Ihnen. Interessierte Freunde können einen Blick darauf werfen

Diese Studie stammt hauptsächlich aus den Tutorials auf der offiziellen Website https://cn.vuejs.org/ v2/ Anleitung

Eine Vue-Instanz

Die Vue-Anwendung beginnt mit einer Root-Vue-Instanz. Vue bindet Daten an Daten. Wenn sich die Daten ändern, ändert sich auch die Ansicht [Beobachtermodus], wodurch eine bidirektionale Datenbindung [Reaktionsfähigkeit] realisiert werden kann. Die Attribute in der Vue-Instanz können über $+Attributname abgerufen werden.

vue bindet Daten während der Initialisierung. Wenn Elemente nach der Initialisierung erneut hinzugefügt werden, ändert sich die Ansicht nicht.

Zweiter Vue-Lebenszyklus

Der Initialisierungsprozess der Vue-Instanz umfasst eine Reihe von Prozessen, darunter das Einrichten der Datenüberwachung, das Kompilieren von Vorlagen, das Mounten der Instanz im DOM und das Aktualisieren des DOM, wenn die Daten werden aktualisiert. In diesem Prozess gibt es einige Lifecycle-Hook-Funktionen, und Sie können in diesem Prozess Ihren eigenen Code hinzufügen, um verschiedene Funktionen zu implementieren.
Das Vue-Lebenszyklusdiagramm sieht wie folgt aus:

Die drei Vue-Vorlagen

Vue-Vorlagen sind alle auf legalem HTML basierend zur HTML-Syntax von. Vue rendert die Vorlage in ein virtuelles DOM.
Vue kann das DOM-Rendering über die Renderfunktion über die JSX-Syntax realisieren.
Vue verwendet {{}} zur Interpolation, also Platzhalter. Ähnlich wie Freemaker. {{}} fügt eine Textzeichenfolge ein. Wenn Sie v-html verwenden, wird der eigentliche HTML-Code eingefügt [dies führt zu XSS, verwenden Sie es mit Vorsicht].
Allgemeine Vue-Befehle:

• v-bind: Kann HTML-Attribute binden, die wie folgt abgekürzt werden können: xx

• v-on : Bindungsereignisse können als @xxxx abgekürzt werden

• v-Modell: bidirektionale Bindungsdaten

• v-if: Urteilsaussage, v - Wenn mehrere Elemente vorhanden sind, können Sie