Vue-Grundlagen MVVM, Vorlagensyntax und Datenbindung

1. Vue-Übersicht

Offizielle Vue-Website

Offizielle englische Website: https://vuejs.org/

Offizielle chinesische Website: https://cn.vuejs.org/

MVVM-Architekturmuster

Einführung in MVVM

MVVM besteht aus drei Teilen: M: Model , V: View , VM: ViewModel (Vue-Instanzobjekt). Die Model-Ebene stellt das Datenmodell dar, und die Geschäftslogik der Datenänderung und -verarbeitung kann auch im Model definiert werden; View stellt die UI-Komponente dar, die für die Konvertierung des Datenmodells in eine UI zur Anzeige verantwortlich ist. ViewModel ist ein Objekt, das View und Model synchronisiert.

Unter der MVVM-Architektur gibt es keine direkte Verbindung zwischen Ansicht und Modell. Stattdessen interagieren sie über ViewModel. Die Interaktion zwischen Modell und ViewModel ist bidirektional, sodass Änderungen an Ansichtsdaten mit dem Modell synchronisiert werden und Änderungen an Modelldaten sofort in der Ansicht widergespiegelt werden.

ViewModel verbindet die Ansichtsebene und die Modellebene durch bidirektionale Datenbindung, und die Synchronisierung zwischen Ansicht und Modell erfolgt vollständig automatisch und erfordert kein menschliches Eingreifen. Daher müssen sich Entwickler nur auf die Geschäftslogik konzentrieren und DOM nicht manuell bedienen oder sich um Probleme bei der Synchronisierung des Datenstatus kümmern. Die komplexe Wartung des Datenstatus wird vollständig von MVVM verwaltet.

MVVM-Musterdiagramm

• Das Design von Vue ist vom MVVM-Modell inspiriert
• Alle Attribute in den Daten werden schließlich in der VM angezeigt.
• Alle Attribute von vm und Alles zum Vue-Prototyp Attribute, beide in Vue-Vorlagen verfügbar Direkt verwenden.

Einführung in Vue

• Es handelt sich um eine JavaScript-MVVM-Bibliothek, eine Reihe dynamischer Benutzeroberflächenkonstruktionen Progressiver Rahmen
• Vue ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Progressiv bedeutet: am wenigsten durchsetzungsfähig. Jedes Framework hat zwangsläufig seine eigenen Merkmale und stellt daher bestimmte Anforderungen an die Benutzer. Diese Anforderungen sind Ansprüche, die stark oder schwach sein können, und ihre Stärke wirkt sich auf die Art und Weise aus, wie sie in der Geschäftsentwicklung eingesetzt werden.
• Progressiv: Vue kann Schicht für Schicht von unten nach oben aufgetragen werden. Einfache Anwendungen benötigen nur eine leichte Kernbibliothek, und komplexe Anwendungen können eine Vielzahl von Vue-Plugins einführen

Vue-Funktionen

• Folgen Sie dem MVVM-Muster
• Zweiseitige Datenbindung : Vue.js reagiert automatisch auf Datenänderungen und ändert alle gebundenen Daten und Anzeigeinhalte entsprechend den vom Benutzer im Code vorab geschriebenen Bindungsbeziehungen.
• Komponentenbildung : Vue.js verwendet Komponenten, um verschiedene Module in einer Einzelseitenanwendung in ein einziges Modul aufzuteilen. In einer separaten Komponente müssen wir nur verschiedene Komponenten-Tags in die übergeordnete Anwendung schreiben (Lücken besetzen) und die an die Komponente zu übergebenden Parameter in das Komponenten-Tag schreiben (genau wie beim Übergeben von Parametern an eine Funktion wird dieser Parameter als Eigenschaft der Komponente bezeichnet) und dann die Implementierung verschiedener Komponenten separat schreiben (Lücken füllen), und dann ist die gesamte Anwendung abgeschlossen. Nutzen Sie ein Komponentenmodell, um die Wiederverwendung von Code zu erhöhen und die Wartung des Codes zu vereinfachen.
• Trennung von Ansichten, Daten und Struktur , Deklarative Codierung: Sie erleichtert Datenänderungen. Es ist nicht erforderlich, den Logikcode zu ändern oder das DOM direkt zu bedienen. Sie müssen die Daten nur bearbeiten, um zugehörige Vorgänge abzuschließen, wodurch die Entwicklungseffizienz verbessert wird.
• Virtueller DOM und Diff-Algorithmus : Über JavaScript können im Voraus verschiedene Berechnungen durchgeführt werden, um den endgültigen DOM-Vorgang zu berechnen und zu optimieren. Da dieser DOM-Vorgang ein Vorverarbeitungsvorgang ist und den DOM nicht tatsächlich betreibt, wird er als virtueller DOM bezeichnet. Schließlich wird nach Abschluss der Berechnung der DOM-Vorgang tatsächlich übermittelt und die Änderungen im DOM-Vorgang werden im DOM-Baum widergespiegelt.

2. Erste Schritte mit Vue

• Damit Vue ordnungsgemäß funktioniert, müssen Sie eine Vue-Instanz erstellen und ein Konfigurationsobjekt übergeben.
• Der Code im Stammcontainer entspricht weiterhin der HTML-Spezifikation, es wurden jedoch einige spezielle Vue-Syntaxen hinzugefügt.
• Der Code im Stammcontainer wird als Vue-Vorlage bezeichnet.
• Ausblick Instanzen und Container sind Eins-zu-eins-Korrespondenz;
• Echte Entwicklung Es gibt nur eine Vue-Instanz und sie wird mit den Komponenten verwendet;
• Das xxx in {{xxx}} muss ein JS-Ausdruck sein, und xxx kann automatisch alle Attribute in den Daten lesen;

  Achten Sie auf den Unterschied zwischen JS-Ausdrücken und JS-Codes (Anweisungen).
  1. Ausdruck: Ein Ausdruck erzeugt einen Wert und kann überall dort platziert werden, wo ein Wert benötigt wird (1).
  	(2). a+b
  	(3). demo(1) //Funktionsaufrufausdruck (4). x === y ? 'a' : 'b' //Ternärer Ausdruck 2, js-Code (Anweisung)
  	(1). wenn(){}
  	(2). für(){}

• Sobald sich die Daten ändern, werden auch die Stellen auf der Seite, an denen die Daten verwendet werden, automatisch aktualisiert.

<!-- Bereiten Sie einen Behälter vor -->
<div id="demo">
	<h1>Hallo, {{name.toUpperCase()}}, {{address}}</h1>
</div>
<Skripttyp="text/javascript" >
	Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
//Erstelle eine Vue-Instanz new Vue({
		el:'#demo', //el wird verwendet, um anzugeben, welchen Container die aktuelle Vue-Instanz bedient. Der Wert ist normalerweise eine CSS-Selektorzeichenfolge.
		data:{ //data dient zum Speichern von Daten. Die Daten werden von dem durch el angegebenen Container verwendet. Wir werden den Wert vorübergehend in ein Objekt schreiben.
		Name: „bilibili“,
		Adresse: 'Shanghai'
		}
	})
</Skript>

3. Vorlagensyntax

Es gibt zwei Hauptkategorien der Vue-Vorlagensyntax:

1. Interpolationssyntax:

• Funktion: Wird verwendet für Analysieren Sie den Inhalt des Tag-Textkörpers (der Inhalt zwischen dem Start-Tag und dem End-Tag ist der Tag-Textkörper).
• Schreibmethode: {{xxx}}, xxx ist ein JS-Ausdruck und alle Attribute in den Daten können direkt gelesen werden.

2. Befehlssyntax:

• Funktion: Wird verwendet für Tags analysieren (einschließlich: Tag-Attribute, Tag-Textinhalt, Bindungsereignisse usw.).
• Beispiel: v-bind:href="xxx" oder abgekürzt als: href="xxx", xxx muss auch als js-Ausdruck geschrieben werden und alle Attribute in den Daten können direkt gelesen werden.
• Hinweis: In Vue gibt es viele Anweisungen, und sie haben alle die Form: v-xxx. Hier nehmen wir v-bind als Beispiel.

<!-- Bereiten Sie einen Behälter vor -->
<div id="Wurzel">
	<h1>Interpolationssyntax</h1>
	<h3>Hallo, {{name}}</h3>
	<hr/>
	<h1>Befehlssyntax</h1>
	<a v-bind:href="address.url.toUpperCase()" x="hello">Klicken Sie hier, um {{address.name}}1 zu erhalten</a>
	<a :href="address.url" x="hallo">Klicken Sie hier, um zu {{address.name}}2 zu gelangen</a>
</div>
<Skripttyp="text/javascript">
	Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
	neuer Vue({
		el:'#Wurzel',
		Daten:{
			Name: „Nachricht“,
			// Kann auf eine mehrstufige Strukturadresse eingestellt werden:{
				Name: „Baidu“,
				URL: „http://www.baidu.com“,
			}
		}
	})
</Skript>

4. Datenbindung

Es gibt zwei Möglichkeiten der Datenbindung in Vue:

1. Einwegbindung (V-Bindung) ： Daten können nur von den Daten zur Seite fließen.

2. Zwei-Wege-Bindung (V-Modell) ： Daten können nicht nur von Daten zu Seite, sondern auch von Seite zu Daten fließen.

Bemerkung:

• Die bidirektionale Bindung wird im Allgemeinen verwendet in Auf Formularelementen (wie Eingabe, Auswahl usw.)
• v-model:value kann als v-model abgekürzt werden, da v-model standardmäßig Werte sammelt (nur formularähnliche Elemente haben Werte).

<div id="Wurzel">
	<!-- Normale Schrift -->
	Einweg-Datenbindung: <input type="text" v-bind:value="name"><br/>
	Zweiseitige Datenbindung: <input type="text" v-model:value="name"><br/>
	<!-- Abkürzung -->
	Einweg-Datenbindung: <input type="text" :value="name"><br/>
	Zweiseitige Datenbindung: <input type="text" v-model="name"><br/>
	<!-- Der folgende Code ist falsch, da das V-Modell nur auf Formularelemente (Eingabeelemente) angewendet werden kann-->
	<h2 v-model:x="name">Hallo</h2> 
</div>
<Skripttyp="text/javascript">
	Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
	neuer Vue({
		el:'#Wurzel',
		Daten:{
			Name: „bilibili“
		}
	})
</Skript>

5. Zwei Möglichkeiten, el und data zu schreiben

1. Es gibt zwei Möglichkeiten, el zu schreiben: new

• Konfigurieren Sie das „el“-Attribut, wenn Sie Vue verwenden.
• Erstellen Sie zuerst eine Vue-Instanz und geben Sie dann den Wert von el über vm.$mount('#root') an.

2. Es gibt zwei Möglichkeiten, Daten zu schreiben

• Objektorientiert
• Funktionalität
• So treffen Sie Ihre Wahl: Beide Schreibmethoden sind akzeptabel, aber bei der Verwendung von Komponenten müssen die Daten im funktionalen Stil geschrieben werden, da sonst ein Fehler gemeldet wird.

3. Ein wichtiger Grundsatz:

Von Vue verwaltete Funktionen müssen Schreiben Sie keine Pfeilfunktionen. Sobald Sie eine Pfeilfunktion schreiben, ist dies keine Vue-Instanz mehr, sondern ein Fenster.

<div id="Wurzel">
	<h1>Hallo, {{name}}</h1>
</div>
<Skripttyp="text/javascript">
	Vue.config.productionTip = false //Verhindert, dass Vue beim Start Produktionstipps generiert.
	//Zwei Möglichkeiten, el zu schreiben-----------
	const v = neuer Vue({
		//el:'#root', //Die erste Möglichkeit, Daten zu schreiben:{
			Name: „bilibili“
		}
	})
	Konsole.log(v)
	v.$mount('#root') //Die zweite Schreibweise // Beispiel:
	setzeTimeout(() => {
		v.$mount('#Wurzel')
	},1000); //Timer: Die Seite zeigt den Vue-Effekt nach 1 Sekunde an// ---------------------
	//Zwei Möglichkeiten zum Schreiben von Daten new Vue({
		el:'#Wurzel',
		//Die erste Möglichkeit, Daten zu schreiben: Objektstil /* data:{
			Name: „bilibili“
		} */
		//Die zweite Möglichkeit, Daten zu schreiben: funktionaler Stil // Daten als Funktion schreiben, und diese Funktion muss ein Objekt zurückgeben. Funktionales Schreiben wird im Allgemeinen für Komponenten und Frameworks verwendet // Hinweis: Diese Funktion wird nicht von selbst aufgerufen, sondern von Vue data(){
			// console.log('@@@',this) //Dies ist das Vue-Instanzobjekt (wenn Daten eine normale Funktion sind, andernfalls bezieht sich dies auf das Fenster)
			zurückkehren {
				Name: „bilibili“
			}
		}
	})
</Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!