Vue-Anfängerhandbuch: Umgebungserstellung und Erste Schritte

Vue-Anfängerhandbuch: Umgebungserstellung und Erste Schritte

Offizielle Vue-Website: https://cn.vuejs.org

Bildbeschreibung hier einfügen

Erster Blick

Was ist Vue?

Ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen

Vue kann Schicht für Schicht von unten nach oben aufgetragen werden

Einfache Anwendungen: Es wird nur eine kleine und leichte Kernbibliothek benötigt

Komplexe Nutzung: Verschiedene Vue-Plugins können eingebunden werden

Bildbeschreibung hier einfügen

Funktionen von Vue:

1. Komponentenmodus zur Verbesserung der Code-Wiederverwendung und besseren Code-Wartung

2. Deklarative Codierung: DOM muss nicht direkt betrieben werden, was die Entwicklungseffizienz verbessert

3. Verwenden Sie den virtuellen DOM + Diff-Algorithmus, um DOM-Knoten wiederzuverwenden

Erstellen einer Vue-Entwicklungsumgebung

1. Laden Sie vue.js herunter

Bildbeschreibung hier einfügen

2. Projekt erstellen und Idee importieren

Bildbeschreibung hier einfügen

3. Download von der offiziellen Website: https://github.com/vuejs/devtools/tree/main

Und verwenden Sie Vue.js devtools

Bildbeschreibung hier einfügen

Hinweis: Wenn die von Ihnen geöffnete Webseite in Vue geschrieben ist, wird das Vue-Logo oben grün.

Die obige Vue-Umgebung ist eingerichtet

Erstellen einer Vue-Instanz

1. Damit Vue funktioniert, müssen Sie eine Vue-Instanz erstellen und ein Konfigurationsobjekt übergeben

2. Der Code im Root-Container entspricht weiterhin der HTML-Spezifikation, ist jedoch mit einer speziellen Vue-Syntax vermischt

3. Der Code im Root-Container heißt [Vue-Vorlage]

4. Vue-Instanzen und Container entsprechen eins zu eins

5. In der tatsächlichen Entwicklung gibt es nur eine Vue-Instanz, die zusammen mit Komponenten verwendet wird

6 . Das xxx in {xxx}} muss als JS-Ausdruck geschrieben werden, und xxx kann automatisch alle Attribute in den Daten lesen.

7. Sobald sich die Daten in den Daten ändern, wird auch der Ort, an dem die Daten auf der Seite verwendet werden, automatisch geändert

Achten Sie auf den Unterschied zwischen JS-Ausdrücken und JS-Codes

1. Ausdruck: Ein Ausdruck generiert einen Wert, der überall dort platziert werden kann, wo ein Wert benötigt wird.

(1)a (2)a+b (3)demo(1) (4)x===y?'a':'b'

2. js-Code (Anweisung)

(1)wenn(){} (2)für(){}

<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Erster Blick</title>
    <!--Vue-Entwicklungsversion vorstellen-->
  <script type="text/javascript" src="../js/vue.js"></script>
</Kopf>
<Text>

<!--Bereiten Sie den Container vor, um Vue eine Vorlage zum Anzeigen der Vue-Ergebnisse bereitzustellen-->
<div id="Wurzel">
    <!--{{js expression}} Interpolationssyntax-->
    <h1>Hallo!{{name.toUpperCase()}},{{address}}</h1>
</div>
    <Skripttyp="text/javascript">
        Vue.config.productionTip=false //Um zu verhindern, dass Vue beim Start Produktionstipps generiert.

       //Erstelle eine Vue-Instanz new Vue({
        //el wird verwendet, um zu bestimmen, welchen Container die aktuelle Vue-Instanz bedient. Der Wert ist normalerweise eine CSS-Selektorzeichenfolge el:'#root'.  
            //Daten werden zum Speichern von Daten zur Verwendung durch den durch el angegebenen Container verwendet und der Wert wird vorübergehend als Objekt geschrieben.
            Daten:{ 
                Name:"Der Südwind kennt meine Absicht",
                Adresse:"Shanghai"
            }
        })
    </Skript>
</body>
</html>

Laufergebnisse:

Bildbeschreibung hier einfügen

Syntax der Vue-Vorlage

Es gibt zwei Hauptkategorien der Vue-Vorlagensyntax

1. Interpolationssyntax:

Funktion: Wird zum Parsen des Tag-Body-Inhalts verwendet

Schreibmethode: {xxx}}, xxx ist ein js-Ausdruck und alle Attribute in den Daten können direkt gelesen werden

2. Befehlssyntax:

Funktion: Wird zum Parsen von Tags verwendet (einschließlich Tag-Attributen, Tag-Textinhalt, Bindungsereignissen usw.)

Beispiel: v-bind:href="xxx" oder abgekürzt als: href="xxx", xxx muss auch einen js-Ausdruck schreiben und kann alle Attribute in den Daten direkt lesen

Hinweis: Es gibt viele Anweisungen in Vue, und sie haben alle die Form: v-???. Hier nehmen wir nur v-bind als Beispiel

<!--Behälter vorbereiten-->
<div id="Wurzel">
  <h1>Interpolationssyntax</h1>
  <h3>Hallo, {{name}}</h3>
  <hr/>
  <h1>Befehlssyntax</h1>
  <!--URL als Ausdruck binden-->
  <a v-bind:href="school.url.toUpperCase()" x="hello">Gehe zu {{school.name}}</a>
 <a :href="url" x="hello">Gehe zu {{name2}}</a>
</div>
</body>
<Skripttyp="text/javascript">
  Vue.config.productionTip=false //Um zu verhindern, dass Vue beim Start Produktionstipps generiert.
  neuer Vue({
    el:'#Wurzel',
    Daten:{
      Name: „Der Südwind kennt meine Absichten“,
      Schule:
        Name: "csdn",
        URL: 'https://blog.csdn.net/weixin_50823456?spm=1000.2115.3001.5343',
      }
    }
  })
</Skript>

Laufergebnisse:

Bildbeschreibung hier einfügen

Vue-Datenbindung

Es gibt zwei Möglichkeiten der Datenbindung in Vue:

1. Einwegbindung (V-Bind): Daten können nur 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:

1. Die bidirektionale Bindung wird im Allgemeinen auf Formularelemente angewendet (z. B.: Eingabe, Auswahl usw.).

2. v-model:value kann als v-model abgekürzt werden, da die Standardsammlung von v-model der Wert value ist

<!--Bereiten Sie einen Behälter vor-->
<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: v-model kann nur auf Formularelemente (Eingabeelemente) angewendet werden-->
    <h2 v-model:x="name">Hallo</h2>
</div>
</body>
<Skripttyp="text/javascript">
  Vue.config.productionTip=false
  neuer Vue({
    el:'#Wurzel',
    Daten:{
      Name: „Der Südwind kennt meine Absichten“
    }
  })
 </Skript>

Laufergebnisse:

Bildbeschreibung hier einfügen

Zwei Möglichkeiten zum Schreiben von EL-Daten

Zwei Möglichkeiten zum Schreiben von Daten und El

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

(1) Konfigurieren Sie el-Attribute beim Erstellen eines neuen Vue

(2) 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

(1) Objektorientiert

(2) Funktional

So wählen Sie: Derzeit ist jede Schreibmethode in Ordnung. Beim zukünftigen Lernen von Komponenten müssen die Daten auf funktionale Weise geschrieben werden, andernfalls wird ein Fehler gemeldet.

3. Ein wichtiger Grundsatz

Für von Vue verwaltete Funktionen dürfen Sie keine Pfeilfunktionen schreiben. Sobald Sie eine Pfeilfunktion schreiben, handelt es sich nicht mehr um eine Vue-Instanz.

<!--Behälter vorbereiten-->
<div id="Wurzel">
  <h1>Hallo, {{name}}</h1>
</div>
</body>
<Skripttyp="text/javascript">
  Vue.config.productionTip=false
  //Zwei Möglichkeiten, el const v=new Vue({ zu schreiben
    //el:'#root', //Die erste Möglichkeit, Daten zu schreiben:{
      Name: „Shang Silicon Valley“
    }
  })
  Konsole.log(v)
  v.$mount('#root') //Die zweite Art des Schreibens //Zwei Möglichkeiten, Daten zu schreiben const v=new Vue({
    el:'#Wurzel',
    //Die erste Möglichkeit zum Schreiben von Daten ist im Objektstil /*data:{
      Name: „Shang Silicon Valley“
    }*/

    //Die zweite Möglichkeit, Daten zu schreiben: funktionale Daten(){
      console.log('@@@',this) //Dies ist das Vue-Instanzobjekt return{
        Name: „Der Südwind kennt meine Absichten“
      }
    }
  })
</Skript>

MVVM-Modell

1. M: Modell: Daten in Daten

2. V: Ansicht: Vorlagencode

3. VM: Ansichtsmodell: Vue-Instanz

Beobachtungen:

1. Alle Attribute in den Daten erscheinen schließlich in der VM

2. Alle Eigenschaften der VM und alle Eigenschaften des Vue-Prototyps können direkt in der Vue-Vorlage verwendet werden

<!--Behälter vorbereiten-->
<div id="Wurzel">
  <!--Ansicht-->
  <h1>Name der Schule:{{name}}</h1>
  <h1>Schuladresse:{{address}}</h1>
</div>
</body>
<Skripttyp="text/javascript">
  Vue.config.productionTip=false
  const vm = new Vue({ //Ansichtsmodell
    el:'#Wurzel',
    Daten:{
      /*Modell*/
      Name:'Südwind',
      Adresse: „Changsha“
    }
  })
  Konsole.log(vm)
</Skript>

Vue-Datenproxy

Operationen (Lesen, Schreiben) von Eigenschaften in einem anderen Objekt über einen Objektproxy

1. Datenproxy in Vue:

Verwenden Sie das VM-Objekt, um den Vorgang (Lesen und Schreiben) der Attribute im Datenobjekt zu proxyen

2. Vorteile des Datenproxys in Vue

Bequemere Bedienung von Daten in Daten

3. Grundprinzipien

Fügen Sie alle Eigenschaften im Datenobjekt über Object.defineProperty() zur VM hinzu.

Weisen Sie jeder der VM hinzugefügten Eigenschaft einen Getter und Setter zu.

Bedienen (lesen, schreiben) Sie die entsprechenden Attribute in Daten innerhalb von Getter und Setter

<!--Behälter vorbereiten-->
<div id="Wurzel">
    <!--Ansicht-->
    <h1>Name der Schule:{{name}}</h1>
    <h1>Schuladresse:{{address}}</h1>
</div>
</body>
<Skripttyp="text/javascript">
    Vue.config.productionTip=false //Verhindert, dass Vue beim Start Produktionstipps generiert const vm=new Vue({
        el:'#Wurzel',
        Daten:{
            Name:'Südwind',
            Adresse: „Changsha“
        }
    })
</Skript>

Ereignisbehandlung in Vue

Grundlegende Verwendung von Ereignissen:

1. Verwenden Sie v-on:xxx oder @xxx, um Ereignisse zu binden, wobei xxx der Ereignisname ist

2. Der Event-Callback muss im Methodenobjekt konfiguriert werden und befindet sich schließlich auf der VM

3. Die in den Methoden konfigurierte Funktion erfordert keine Pfeilfunktion, sonst ist dies kein VM

4. Die in den Methoden konfigurierten Funktionen sind alle von Vue verwaltete Funktionen und verweisen auf VM- oder Komponenteninstanzobjekte

5. @click="demo" und @click="demo($event)" haben die gleiche Wirkung, aber letzteres kann Parameter übergeben

<!--Behälter vorbereiten-->
<div id="Wurzel">
    <h1>Willkommen zum Studium im Shang Silicon Valley</h1>
    <!--<button v-on:click="showInfo">Klicken Sie hier, um Informationen zu erhalten</button>-->
    <button @click="showInfo1">Klicken Sie hier für Info 1</button>
    <button @click="showInfo2(66,$event)">Klicken Sie hier für Info 2</button>
</div>
</body>

<Skripttyp="text/javascript">
    Vue.config.productionTip=false //Verhindert, dass Vue beim Start Produktionstipps generiert new Vue({
        el:'#Wurzel',
        Daten: {
            Name: „Shang Silicon Valley“
        },
        Methoden:{
            showInfo1(Ereignis){
               /* konsole.log(Ereignis.Ziel.innerHTML)
               console.log(dies) //Dies ist vm*/
                alert("Hallo Mitschüler 1")
            },
            showInfo2(Zahl,a){
                /* konsole.log(Ereignis.Ziel.innerHTML)
                console.log(dies) //Dies ist vm*/
                alert("Hallo Mitschüler 2")
                console.log(Nummer,a)
            }
        }
        })
        </Skript>

Bildbeschreibung hier einfügen

Zusammenfassen

Dies ist das Ende dieses Artikels über Vues Anfängerhandbuch zur Einrichtung der Umgebung und zum Einstieg. Weitere relevante Inhalte zur Einrichtung der Vue-Umgebung und zum Einstieg finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Vue Vuex erstellt eine Vuex-Umgebung und teilt Vuex Sum Case
  • Detaillierte Erklärung der Vuex-Umgebung
  • Detaillierte Zusammenfassung der Konstruktion der Vue-Projektumgebung
  • Erstellen Sie eine Vue-Entwicklungsumgebung
  • Einfaches Tutorial zum Einrichten einer Vue-Umgebung
  • Vue2.0 von Grund auf_Schritte zum Erstellen einer Umgebung
  • Detaillierte Erklärung der einfachsten Strategie zum Einrichten einer vue.js-Entwicklungsumgebung
  • Schritt-für-Schritt-Anleitung zum Erstellen und Installieren einer Windows-basierten Vue.js-Laufzeitumgebung
  • Tutorial zum Einrichten der vue.js-Entwicklungsumgebung
  • Erstellen einer Vue-Projektumgebung

<<:  Detaillierte Erklärung, warum die langsame Abfrageprotokollzeit von MySQL 5.7 8 Stunden hinter der Systemzeit liegt

>>:  nginx+tomcat-Beispiel für den Zugriff auf das Projekt über den Domänennamen

Artikel empfehlen

Analyse des Prozesses zum Bereitstellen reiner HTML-Dateien in Tomcat und WebLogic

1. Zunächst muss die reine HTML-Datei einen Eintr...

Nützliche Codes zum Erstellen von Webseiten

<br />Wie kann ich die Bildlaufleiste auf de...

Detaillierte Erklärung der Linux-Befehle und der Dateisuche

1. Führen Sie eine Dateinamensuche durch which (S...

Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil

login.html-Teil: <!DOCTYPE html> <html l...

Detaillierte grafische Erklärung zum Löschen des Keep-Alive-Cache

Inhaltsverzeichnis Eröffnungsszene Direktes Rende...

Erstellen Sie eine schöne, umklappbare Anmelde- und Registrierungsoberfläche auf HTML+CSS-Basis

Erstellen Sie eine ansprechende Anmelde- und Regi...

Das WeChat-Applet implementiert einen einfachen Rechner

Der einfache Rechner des WeChat-Applets dient Ihn...

So installieren Sie die grüne Version von MySQL Community Server 5.7.16 und implementieren die Remote-Anmeldung

1. Laden Sie MySQL Community Server 5.7.16 herunt...

Design-Tipps: Wir glauben, es wird Ihnen gefallen

<br />Wenn Sie sich diesen Titel ansehen, ko...

Detaillierte Erklärung zur korrekten Verwendung der Zählfunktion in MySQL

1. Beschreibung Wenn wir in MySQL die Gesamtzahl ...

Beispiel für ein JavaScript-Meldungsfeld

In JavaScript können drei Arten von Meldungsfelde...

Verschiedene Arten von MySQL-Indizes

Was ist ein Index? Ein Index ist eine Datenstrukt...

Util-Modul im node.js-Tutorial-Beispiel – detaillierte Erklärung

Inhaltsverzeichnis Ausgehend von der Typbeurteilu...

So fügen Sie einem Alpine-Image einen Ansible-Dienst hinzu

Verwenden Sie apk add ansible, um den Ansible-Die...

Grafisches Tutorial zur Maven-Installation und -Konfiguration unter Windows (einschließlich lokalisierter Warehouse-Konfiguration)

1. Maven herunterladen Offizielle Maven-Website: ...