Detaillierte Einführungshinweise zu Vue

1. Einleitung

Ich habe vor Kurzem einige Tutorials gefunden und die offizielle Website durchsucht, um mir einige Vue-Inhalte, einige Einführungskonzepte, die grundlegende Syntax und einige häufig verwendete Operationen anzusehen. Ich habe einen kurzen Blick darauf geworfen und festgestellt, dass der gesamte Text + einige Codes mehr als 9.000 Wörter umfassen. Die Einführungssyntax ist immer noch leicht zu verstehen. Ich habe eine gewisse Grundlage beim Erstellen kleiner Programme und es fühlt sich sehr ähnlich an. Bei einigen etwas komplizierteren Punkten habe ich jedoch das Gefühl, dass die Zusammenfassung nicht detailliert genug ist, wie z. B. Slots und berechnete Eigenschaften. Ich lese in meinem täglichen Leben nicht viel Front-End-Sachen. Ich habe die Notizen während des Lernprozesses sortiert und teile sie mit Ihnen! Willkommen, alle zum Meinungsaustausch ~

2. Erster Eindruck

(I) Vue-Konzepte verstehen

(1) Was ist Vue.js

Vue (ausgesprochen /vjuː/, ähnlich wie „view“) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Anders als andere große Frameworks ist Vue darauf ausgelegt, Schicht für Schicht von unten nach oben angewendet zu werden. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene. Dies erleichtert nicht nur den Einstieg, sondern lässt sich auch problemlos in Bibliotheken von Drittanbietern oder vorhandene Projekte integrieren.

(2) Was ist das Progressive Framework?

Nach dem Lesen einiger Tutorials und Artikel lässt sich das progressive Framework in drei Worten verstehen: „nicht gezwungen“. Vue zwingt Sie nicht, seinen gesamten Inhalt (Funktionsmerkmale) zu verwenden. Benutzer können entsprechend ihrer eigenen Situation auswählen und einen Teil davon verwenden.

Es gibt eine bessere Antwort zu diesem Thema. Sie ist auf Baidu leicht zu finden. Ich habe einen Teil davon gepostet.

Vue bedeutet weniger, das heißt, Sie können Vue in das ursprüngliche System einführen und es direkt als jQuery verwenden. Mit Vue können Sie damit eine oder zwei Komponenten auf dem ursprünglichen großen System implementieren und es als jQuery verwenden. Sie können es auch für die Entwicklung des gesamten Familien-Buckets verwenden.

(II) MVVM-Architektur

Bevor wir Vue formal lernen, müssen wir zunächst ein Front-End-basiertes Architekturmodell verstehen, nämlich MVVM, die Abkürzung für Model-View-ViewMode. Seine Beziehung wird einfach wie folgt beschrieben:

Modell: stellt JavaScript-Datenobjekte dar

Ansicht (Ansichtsebene): stellt DOM dar, was auch einfach als der auf dem Frontend angezeigte Inhalt verstanden werden kann

ViewModel: verbindet die Ansicht und die Daten, d. h. es wird zum bidirektionalen Binden von Daten und Seiten verwendet

In der MVVM-Architektur gibt es keine Möglichkeit für die direkte Kommunikation zwischen Ansicht und Daten. Die einzige Möglichkeit besteht darin, das ViewModel als Zwischenbeziehung zu verwenden. Das ViewModel kann die Änderungen in den Daten beobachten und dann den Ansichtsinhalt aktualisieren oder die Änderungen in der Ansicht überwachen und die Daten über die Änderungen benachrichtigen.

Ich werde später einen kleinen Einführungsfall schreiben, und Sie können seine Eigenschaften gemeinsam erleben!

(III) Vorteile von Vue

1. Kleine Größe

33K nach der Komprimierung

2. Höhere Betriebseffizienz

Basierend auf virtuellem DOM, einer Technologie, die verschiedene Berechnungen im Voraus über JavaScript durchführen kann, berechnet und optimiert den endgültigen DOM-Vorgang. Da dieser DOM-Vorgang ein Vorverarbeitungsvorgang ist und den DOM nicht tatsächlich betreibt, wird er als virtueller DOM bezeichnet.

3. Zweiseitige Datenbindung

Entwickler müssen keine DOM-Objekte mehr bedienen und können sich mehr auf die Geschäftslogik konzentrieren

4. Reichhaltige Ökologie und geringe Lernkosten

Es gibt eine große Anzahl ausgereifter und stabiler UI-Frameworks und gemeinsamer Komponenten auf Basis von Vue.js auf dem Markt! Sofort einsatzbereit, schnelle Entwicklung, anfängerfreundlich, einfacher Einstieg, viele Lernmaterialien

(IV) Eintrittsfall

Zum Schreiben von Vue können Sie zwischen Vscode, HBuilder, Sublime, Webstrom oder sogar IDEA wählen. Wählen Sie es einfach aus.

Zuerst müssen wir Vue importieren. Sie können auf die offizielle Website gehen und die Datei direkt herunterladen und einen lokalen Import durchführen, ähnlich wie beim Importieren von jQuery, oder eine Netzwerkreferenz verwenden. Im Folgenden finden Sie beispielsweise die Import- oder Downloadadresse auf der offiziellen Website.

Wie Sie sehen, erstellen wir nach der Einführung eine Vue-Instanz in der Form „new“, in der wir zum Binden das Div mit dem ID-Wert „hello“ bis „el“ finden, einen Wert in „data“ zuweisen und die Daten im Div durch zwei Sätze geschweifter Klammern wiedergeben.

Wenn Sie über Grundkenntnisse zu WeChat-Applets verfügen, werden Sie feststellen, dass die Strukturen der beiden Apps tatsächlich recht ähnlich sind.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
</Kopf>
<Text>

<div id="hallo">
  <h2>{{Inhalt}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
  var vm = neuer Vue({
      el: "#hallo",
      Daten:{
        Inhalt: „Hallo Vue!“
      }
  })
</Skript>

</body>
</html>

Es gibt definitiv kein Problem mit den Echodaten. Versuchen wir, den Wert des Inhalts in der Konsole zu ändern. Sie können sehen, dass sich die Seite entsprechend geändert hat.

Wir haben unsere erste Vue-Anwendung erfolgreich erstellt! Dies sieht dem Rendern einer Zeichenfolgenvorlage sehr ähnlich, Vue leistet jedoch im Hintergrund eine Menge Arbeit. Nachdem die Daten und das DOM nun verbunden sind, reagiert alles. Wie bestätigen wir es? Öffnen Sie die JavaScript-Konsole Ihres Browsers (öffnen Sie sie auf dieser Seite) und ändern Sie den Wert von app.message . Sie werden sehen, dass das obige Beispiel entsprechend aktualisiert wird.

Beachten Sie, dass wir nicht mehr direkt mit dem HTML interagieren. Eine Vue-App mountet es in ein DOM-Element (in diesem Fall #app ) und hat die volle Kontrolle darüber. Dieses HTML ist unser Einstiegspunkt, aber der Rest geschieht innerhalb der neu erstellten Vue-Instanz. —— Offizielle Vue-Website

3. Grundlegende Syntax von Vue

(I) Deklarative Wiedergabe

Wenn Sie schon einmal auf Vorlagen wie Thymeleaf gestoßen sind, können Sie sehen, dass das obige Vue-Beispiel eine prägnante Vorlagensyntax verwendet, d. h. zwei Sätze geschweifter Klammern, um den Wert zu umschließen und Daten deklarativ im DOM-System darzustellen. Dies ähnelt eigentlich dem „$“ plus einem Satz geschweifter Klammern in Thymeleaf.

Wir haben auch eine Möglichkeit, Elemente zu binden: mit Anweisungen

<div id="hallo-2">
  <span v-bind:title="Inhalt">
    Bewegen Sie die Maus einige Sekunden, um hier die Eingabeinformationen zur dynamischen Bindung anzuzeigen!
  </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
  var vm = neuer Vue({
      el: "#hallo-2",
      Daten:{
        Inhalt: „Seite geladen am“ + neues Date().toLocaleString()
      }
  })
</Skript>

Beobachten Sie das Ergebnis. Wenn wir mit der Maus über den Text fahren, werden die gebundenen Daten angezeigt.

Das v-Bind-Attribut, das Sie gesehen haben, wird als Direktive bezeichnet. Die Anweisungen sind mit dem Präfix v- versehen, um anzuzeigen, dass es sich um spezielle Attribute handelt, die von Vue bereitgestellt werden. Der Code soll das Titelattribut dieses Elementknotens mit der Inhaltseigenschaft der Vue-Instanz in Einklang bringen.

Wenn Sie den Wert von vm.content in der Konsole ändern, ändern sich die gebundenen Daten weiterhin

Hinweis: Die Verwendung von v-bind erfordert die Einführung einer Einschränkung im Header

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

Wenn Sie IDEA verwenden, um das Vue.js-Plugin zu installieren, werden Sie aufgefordert, den Vorgang abzuschließen.

(II) Bedingtes Urteil

Die Anweisungen für die bedingte Beurteilung sind v-if, v-else-if, v-else

Schauen wir uns zwei Beispiele an: Das erste ist die Beurteilung von wahr oder falsch.

<div id="hallo-3">
  <h2 v-if="isBoy">ist ein Junge</h2>
  <h2 v-else>Es ist ein Mädchen</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
  var vm = neuer Vue({
      el: "#hallo-3",
      Daten:{
        isBoy: wahr
      }
  })
</Skript>

Die Standardanzeige ist „boy“, wir ändern es dann in der Konsole auf „false“

Als nächstes folgt die Beurteilung des Wertes. Nehmen wir ein kleines Beispiel für den Vergleich von Noten. Die Einschränkungen für die Werte sind jedoch nicht streng genug. Um das if-Beispiel zu erklären, müssen Sie nur die Bedeutung verstehen.

<div id="hallo-3">
  <h2 v-if="score < '60'">Nicht bestanden</h2>
  <h2 v-else-if="score >= '60' && score < '80'">Bestanden</h2>
  <h2 v-else>Hervorragende Noten</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
  var vm = neuer Vue({
      el: "#hallo-3",
      Daten:{
          Punktzahl: 66
      }
  })
</Skript>

Weiter die Ergebnisse ändern

(III) Zyklus

Sie können v-for verwenden, um die Daten zu durchlaufen. Beispielsweise ersetzt das erweiterte for in Java einfach den Doppelpunkt durch in. students entspricht dem Array-Namen in data und student stellt jedes Element darin dar. Der spezifische Attributwert wird in der Form XXX.xx herausgenommen.

<div id="hallo-4">
  <li v-for="Student in Studenten">
    {{student.name}}
  </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
    var vm = neuer Vue({
        el: "#hallo-4",
        Daten: {
            Studenten: [{name: '张三'}, {name: '李四'}, {name: '王五'}]
        }
    })
</Skript>

Versuchen Sie, ein neues in die Konsole zu pushen, und es wird ebenfalls aktualisiert.

Hinweis: Dies ist nur der einfachste Fall. In vielen Fällen, wenn das durchsuchte Array Objekte enthält und die Objekte mehrere Werte haben, z. B. eine ID, wird normalerweise der eindeutige ID-Wert als Schlüsselwert verwendet, z. B.:

<div v-for="Artikel in Artikeln" v-bind:key="item.id">
  <!-- Inhalt -->
</div>

Um Vue einen Hinweis zu geben, damit es die Identität jedes Knotens verfolgen und somit vorhandene Elemente wiederverwenden und neu anordnen kann, müssen Sie jedem Element ein eindeutiges Schlüsselattribut zuweisen:

Es wird empfohlen, bei der Verwendung von v-for nach Möglichkeit ein Schlüsselattribut anzugeben, es sei denn, der durchlaufene DOM-Inhalt ist sehr einfach oder Sie verlassen sich bewusst auf das Standardverhalten, um Leistungsverbesserungen zu erzielen.

(IV) Ereignisbindung

Oft müssen wir Benutzern die Interaktion mit der Anwendung ermöglichen, indem sie auf Schaltflächen oder Beschriftungskomponenten klicken, also Ereignisse binden. In Vue können wir dazu über die Direktive v-on einen Ereignislistener hinzufügen.

Hinweis: Verwenden Sie v-on, um Einschränkungen einzuführen

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

Beispielcode

<div id="hallo-5">
  <button v-on:click="helloWorld">Hallo Welt</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
    var vm = neuer Vue({
        el: "#hallo-5",
        Daten: {
            Inhalt: „Hallo Welt!“
        },
        Methoden: {
            halloWelt: Funktion () {
                Alarm (dieser Inhalt);
            }
        }
    })
</Skript>

Wie Sie sehen, ist das Ereignis „helloWorld“ an v-on:click gebunden und die spezifische Logik des Ereignisses muss in den Methoden des Vue-Objekts definiert werden.

(V) Zweiwegebindung

Bereits bei der Einführung des MVVM-Architekturmusters wurde in der Abbildung die bidirektionale Bindung zwischen View und ViewModel erwähnt. Einfach ausgedrückt: Wenn sich die Daten ändern, ändert sich auch die Ansicht, und wenn sich die Ansicht ändert, ändern sich auch die Daten.

Tatsächlich haben wir in der vorherigen grundlegenden Syntax die erste Hälfte des Satzes klar verstanden, nämlich das Ändern der Daten in Daten, wodurch Änderungen in der Ansicht verursacht werden. Hier konzentrieren wir uns auf die zweite Hälfte des Satzes.

Erstens stellt Vue die v-model-Direktive bereit, die die Implementierung einer bidirektionalen Bindung zwischen Formular-Eingabe und Anwendungsstatus erleichtert.

Ausgehend von mehreren gängigen Formularen können wir die Direktive „v-model“ verwenden, um eine bidirektionale Bindung von Daten an die Formulareingabe, „textarea>“, „select“ usw. durchzuführen. Sie kann je nach Steuerelementtyp die richtige Methode zum Aktualisieren des Elements auswählen.

Nach der Verwendung der V-Model-Direktive werden jedoch der ursprüngliche Wert (aktiviert, ausgewählt usw.) des Formulars ignoriert und die Daten in der Vue-Instanz werden immer als Datenquelle verwendet.

Geben Sie in der Eingabe Text ein

<div id="hallo-6">
  Eingabe: <input type="text" v-model="content" > Ausgabe: {{content}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
    var vm = neuer Vue({
        el: "#hallo-6",
        Daten: {
            Inhalt: „Hallo Welt!“
        },
    })
</Skript>

Wir konnten bereits zwei Sätze geschweifter Klammern verwenden, um den Wert des Inhalts in der Ausgabeposition wiederzugeben. Wir verwenden v-model im Eingabeattribut, um es an den Inhalt zu binden, sodass der in das Eingabefeld eingegebene Wert den Wert des Inhalts in den Daten direkt beeinflussen kann, d. h. wenn der in das Eingabefeld eingegebene Wert geändert wird, ändert sich auch der Inhalt in der Ausgabeposition.

In der Eingabe, Optionsfeld

<div id="hallo-6">
  Geschlecht:
  <input type="radio" name="gender" value="Geschlecht" v-model="gender">Geschlecht<input type="radio" name="gender" value="Geschlecht" v-model="gender">GeschlechtAusgabe: {{Geschlecht}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
    var vm = neuer Vue({
        el: "#hallo-6",
        Daten: {
            Geschlecht: 'Männlich'
        },
    })
</Skript>

Effektanzeige

Wählen Sie

<div id="hallo-6">
  <v-Modell auswählen="wählen">
    <option value="" deaktiviert>---Bitte wählen---</option>
    <option>A-Apfel</option>
    <option>B-Kirsche</option>
    <option>C-Wassermelone</option>
  </Auswählen>
  Ausgabe: {{choose}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<Skript>
    var vm = neuer Vue({
        el: "#hallo-6",
        Daten: {
            wählen: ''
        },
    })
</Skript>

(VI) Vue-Komponenten

Komponenten sind auch in Vue ein sehr wichtiges Konzept. Auf einer Seite können beispielsweise Kopfzeile, Fußzeile, Seitenleiste und Hauptinhaltsbereich als Komponenten betrachtet werden. Einige Komponenten sind jedoch fest, wie die Kopfzeile, und andere sind variabel, wie der Inhaltsbereich.

Mit Vue können wir große Anwendungen mit kleinen, unabhängigen und oft wiederverwendbaren Komponenten erstellen.

Hinweis: Tatsächlich erstellen wir .vue-Vorlagendateien und werden diese Schreibform nicht direkt auf der Seite verwenden. Sie dient nur der Vereinfachung der Erklärung.

Lassen Sie uns zur Erklärung einen einfachen, aber relativ vollständigen Fall heranziehen.

Lassen Sie uns zunächst darüber sprechen, was wir am Ende tun möchten. Beispielsweise sind div oder input alles Tags. Was wir jetzt tun möchten, ist, ein solches Tag anzupassen, indem wir eine benutzerdefinierte Komponentenvorlage erstellen. Wir müssen dieses Tag nur dort referenzieren, wo wir es benötigen, und wir können den gewünschten Effekt in der Vorlage erzielen und den Effekt der Extraktion und Wiederverwendung erzielen.

Erstellen Sie zunächst eine Komponente im Format Vue.component…, wobei „ideal-20“ der Name des Komponenten-Tags ist, „template“ den Inhalt in der Vorlage darstellt und „props“ den Parameternamen darstellt, den wir bei der Referenz übergeben.

Als Nächstes fügen wir das benutzerdefinierte Komponenten-Tag ideal-20 in ein Div ein, das an hello-7 gebunden wurde. Wir möchten das Fruits-Array in den Daten durchlaufen, sodass wir eine For-Durchquerung im Attribut ideal-20 durchführen können. Gleichzeitig müssen wir jedes Element über v-bind:ideal="item" an die Komponentenvorlage binden. Da es sich bei dem Array nicht um ein normales Array handelt, weisen wir id als Schlüsselwert zu.

<div id="hallo-7">
  <ideal-20 v-for="Artikel in Früchten" v-bind:ideal="Artikel" v-bind:key="Artikel.id"></ideal-20>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<Skript>
    // Definieren Sie eine neue Komponente mit dem Namen todo-item Vue.component('ideal-20', {
        Requisiten: ['ideal'],
        Vorlage: '<li>{{ideal.name}}</li>'
    })
    var vm = neuer Vue({
        el: "#hallo-7",
        Daten: {
            Früchte:
                {id: 0, name: 'Apple'},
                {id: 1, name: 'Cherry'},
                {id: 2, name: ‚Mangostan‘}
            ]
        }
    })
</Skript>

Effektanzeige

(VII) Erste Schritte mit Axios

Zunächst müssen wir erwähnen, warum wir dieses Ding verwenden müssen.

Bei der herkömmlichen Entwicklung verwenden wir normalerweise Ajax zur Kommunikation. Vue.js als Framework auf Ansichtsebene unterstützt jedoch keine Ajax-Kommunikationsfunktion. Daher kann Axios zur Implementierung der asynchronen Ajax-Kommunikation verwendet werden.

Schauen wir uns zunächst die Funktionen an:

• Erstellen von XMLHttpRequests vom Browser aus
• HTTP-Anfragen von node.js aus stellen
• Unterstützung für Promise API
• Abfangen von Anfragen und Antworten
• Konvertieren von Anforderungs- und Antwortdaten
• Anfrage abbrechen
• JSON-Daten automatisch konvertieren
• Clientseitiger Support für XSRF-Schutz

Zuerst nehmen wir ein Stück JSON, um die Daten zu simulieren

{
  "Name": "BWH_Steven",
  "Blog": "www.ideal-20.cn",
  "um": {
    "Land": "China",
    "Telefon": "13888888888"
  },
  "Studenten": [
    {
      "id": 0,
      "Name": "Zhang San"
    },
    {
      "Ich würde": 1,
      "Name": "Li Si"
    },
    {
      "Ich würde": 2,
      "Name": "Wang Wu"
    }
  ]
}

Aus der folgenden Abbildung können wir ersehen, dass wir den Code in mounted() schreiben können

Als nächstes folgt der verwendete Code

Zunächst müssen Sie neben Vue auch das CDN von Axios einführen. Holen Sie sich in der Methode mount() diese JSON-Datei und weisen Sie response.data, also den erhaltenen Wert, den in data() definierten Informationen zu.

Hinweis: data und data() sind unterschiedlich

Dann können Sie das Echo im gebundenen Hello-8-Div aufrufen

Erläuterung: Warum wird der v-clock ein Stil hinzugefügt? Dies liegt daran, dass beim Anzeigen von Daten zuerst die Wörter {{info.name}} angezeigt und dann nach Erhalt des Werts gerendert werden. Wenn die Netzwerkgeschwindigkeit langsam ist, können Sie nur info.name sehen und die Erfahrung ist nicht sehr gut.

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
  <Stil>
    [v-Uhr] {
      Anzeige: keine;
    }
  </Stil>
</Kopf>
<Text>
<div id="hallo-8" v-uhr>
  <div>{{info.name}}</div>
  <div>{{info.blog}}</div>
  <div>{{info.über.land}}</div>
  <div>{{info.über.telefon}}</div>
  <div>{{info.students[0].name}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<Skript>

    var vm = neuer Vue({
        el: "#hallo-8",
        Daten() {
            zurückkehren {
                Information: {}
            }
        },
        montiert() {
            axios.get("../json/data.json").then(response => (this.info = response.data));
        }
    })
</Skript>

</body>
</html>

(VIII) Berechnete Eigenschaften

Ich denke, die offizielle Dokumentation ist in Bezug auf diesen Absatz ziemlich eindeutig.

Ausdrücke in Vorlagen sind sehr praktisch, sie sind jedoch in erster Linie für einfache Berechnungen gedacht. Wenn Sie zu viel Logik in eine Vorlage packen, kann diese unhandlich und schwer zu pflegen werden. Zum Beispiel:

<div id="Beispiel">
  {{ message.split('').reverse().join('') }}
</div>

An diesem Punkt ist die Vorlage nicht mehr nur eine einfache deklarative Logik. Sie müssen eine Weile darauf schauen, um zu erkennen, dass wir hier die umgekehrte Zeichenfolge der Variablen message anzeigen möchten. Schwieriger wird die Handhabung, wenn Sie in Ihrer Vorlage mehr von der umgekehrten Zeichenfolge hier einfügen möchten.

Sie sollten daher für jede komplexe Logik berechnete Eigenschaften verwenden.

<div id="hallo-9">
  <p>Ursprüngliche Daten: "{{ message }}"</p>
  <p>Daten umkehren: "{{ reversedMessage }}"</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<Skript>
    var vm = neuer Vue({
        el: '#hallo-9',
        Daten: {
            Nachricht: 'Hallo'
        },
        berechnet: {
            // Berechneter Eigenschaftsgetter
            umgekehrteNachricht: Funktion () {
                // „this“ bezieht sich auf die VM-Instanz return this.message.split('').reverse().join('')
            }
        }
    })
</Skript>

Ergebnis:

Originaldaten: „Hallo“

Flip-Daten: "olleH"

Hier deklarieren wir eine berechnete Eigenschaft reversedMessage. Die von uns bereitgestellte Funktion wird als Getter-Funktion für die Eigenschaft vm.reversedMessage verwendet:

console.log(vm.reversedMessage) // => 'olleH'
vm.message = "Auf Wiedersehen"
console.log(vm.reversedMessage) // => 'eybdooG'

Sie können die Browserkonsole öffnen und die VM im Beispiel selbst ändern. Der Wert von vm.reversedMessage hängt immer vom Wert von vm.message ab.

Sie können berechnete Eigenschaften in Vorlagen genauso binden wie normale Eigenschaften. Vue weiß, dass vm.reversedMessage von vm.message abhängt. Wenn sich vm.message ändert, werden daher auch alle Bindungen aktualisiert, die von vm.reversedMessage abhängen. Und das Beste daran ist, dass wir diese Abhängigkeit deklarativ erstellt haben: Der berechnete Eigenschaftsgetter hat keine Nebenwirkungen, was das Testen und Verstehen erleichtert.

Was ist der Unterschied zwischen berechneten Eigenschaften und Methoden?

Glauben Sie angesichts dessen, dass ich diesen Effekt auch mit Methoden erzielen und die spezifische Geschäftslogik in die definierten Methoden einfügen kann? Der größte Unterschied zwischen ihnen besteht jedoch darin, dass berechnete Eigenschaften basierend auf ihren reaktionsfähigen Abhängigkeiten zwischengespeichert werden. Mit anderen Worten, wenn sich die Nachricht, von der wir oben abhängig sind, nicht ändert, erhält reversedMessage sofort das vorherige Ergebnis und es besteht keine Notwendigkeit, die Funktion erneut auszuführen. Berechnete Eigenschaften können uns helfen, viel Leistungsaufwand zu sparen, aber wenn wir keinen zwischengespeicherten Inhalt möchten, können wir stattdessen Methoden verwenden.

(IX) Steckplatz

In 2.6.0 haben wir eine neue einheitliche Syntax für benannte und bereichsbezogene Slots eingeführt (die v-slot-Direktive). Es ersetzt die Slot- und Slot-Scope-Attribute, die mittlerweile veraltet sind, aber nicht entfernt wurden und weiterhin dokumentiert sind. Der Ursprung der neuen Syntax ist in diesem RFC zu finden.

Das ist zu oberflächlich, lesen Sie es nicht.

Ein Slot ist ein Platzhalter, den eine untergeordnete Komponente einer übergeordneten Komponente gibt, z. B. <slot></slot>. Die übergeordnete Komponente kann in diesen Platzhalter einige Vorlagen oder HTML-Code einfügen.

Um es einfach auszudrücken: Es handelt sich um eine Komponente-in-Komponente

Wie unten gezeigt, habe ich drei Komponenten definiert. Ideal ist die übergeordnete Komponente, in der Slot als Platzhalter verwendet wird. Gleichzeitig verweist das Namensattribut auf die beiden untergeordneten Komponenten Ideal-Titel und Ideal-Inhalt. Um die Daten in den untergeordneten Komponenten vom Server (Simulation) anzuzeigen, müssen sie dynamisch angezeigt werden, d. h. durch Übergabe von Parametern (wie in der vorherigen Erläuterung der Komponentenvorlagen erwähnt) und koordinierte Durchquerung zum Lesen der Daten in Daten.

<div id="hallo-10">
  <ideal>
    <ideal-title slot="ideal-title" v-bind:title="Titel"></ideal-title>
    <ideal-content slot="idealer Inhalt" v-for="contentItem in Inhalt" v-bind:content="contentItem"></ideal-content>
  </ideal>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<Skript>
    Vue.component("ideal", {
        Vorlage: '<div>\
                    <slot name="ideal-title"></slot>\
                      <ul>\
                        <slot name="idealer-inhalt"></slot>\
                      </ul>\
                   </div>'
    })
    
    Vue.component("idealer Titel", {
        Requisiten: ['Titel'],
        Vorlage: '<div>{{title}}</div>'
    })
    
    Vue.component("idealer Inhalt", {
        Requisiten: ['Inhalt'],
        Vorlage: '<li>{{Inhalt}}</li>'
    })

    var vm = neuer Vue({
        el: '#hallo-10',
        Daten: {
            Titel: „Ideale überdauern mehr als zwanzig Jahre“,
            Inhalt: ["Java", "Linux", "Datenbank"]
        }
    })
</Skript>

Die Ergebnisse sind wie folgt:

IV. Erste Schritte mit Vue

(I) Erstellen Sie ein Vue-cli-Projekt

Vue-cli ist ein offizielles Gerüst zum schnellen Erstellen von Vue-Projekten. Es kann einfach als Maven verstanden werden, d. h. das Gefühl, beim Erstellen ein Gerüst auszuwählen, was die Entwicklung bequemer macht.

(1) Vorbereitung

A: Installieren Sie Node.js

Node.js Gehen Sie zum Herunterladen auf die offizielle Website oder die chinesische Website

Geben Sie node -v in cmd ein. Wenn die Versionsnummer angezeigt wird, ist das normal. Geben Sie npm -v ein. Die Versionsnummer wird ebenfalls angezeigt. Das ist normal.

Passen Sie das Node.js-Bild an die Taobao-Bildbeschleunigung an (cnpm)

# -g steht für globale Sicherheit. Diese Methode wird empfohlen. npm install cnpm -g

# Eine andere Möglichkeit besteht darin, bei jeder Verwendung von npm am Ende eine Zeichenfolge hinzuzufügen. Es wird nicht empfohlen, npm install --registry=https://registry.npm.tabao.org zu verwenden.

Öffnen Sie nach der Installation diesen Pfad (abc ist der Benutzername meines Computers, entsprechend Ihrem eigenen):

C:\Benutzer\abc\AppData\Roaming\npm\node_modules

Normalerweise wird cnpm installiert, und dann beginnen wir mit der Installation von vue-cli

B: Installieren Sie vue-cli

cnpm installiere vue-cli -g

Öffnen Sie nach der Installation cmd im npm-Ordner und geben Sie vue-list ein. Wenn ein sternförmiger Inhalt wie der unten gezeigte erscheint, ist die Installation abgeschlossen.

C: Erstellen Sie ein Vue-CLI-Programm

Erstellen Sie ein Verzeichnis am gewünschten Ort und wählen Sie die webpack-basierte Vue-Anwendung aus

Geben Sie den Befehl in cmd unter diesem Ordner ein

vue init webpack vue_02_myvue

Geben Sie einige grundlegende Informationen ein, z. B. Projektname und Autorenname

Wenn im folgenden Inhalt Optionen vorhanden sind, drücken Sie die Eingabetaste und n (d. h. nein), um fortzufahren

An dieser Stelle werden Sie gefragt, ob npm install automatisch ausgeführt werden soll (wie unten gezeigt). Wenn ja, werden einige Abhängigkeiten automatisch installiert. Klicken Sie auf Nein und Sie müssen den Befehl zur Installation selbst eingeben. Wählen Sie also einfach Ja.

Sollen wir npm install für Sie ausführen, nachdem das Projekt erstellt wurde? (empfohlen) npm

Nach der Fertigstellung werden die node_modules im Projekt viele weitere Abhängigkeiten haben

Dann werden Sie daran erinnert, dass es initialisiert ist. Wenn Sie es starten möchten, können Sie diese beiden Sätze ausführen. Der erste Satz besteht darin, den Projektordner einzugeben, den ich aus dem externen Ordner angepasst habe, und der zweite Satz besteht darin, zu starten

Wenn der folgende Inhalt angezeigt wird, war der Start erfolgreich und Sie können über die folgende Adresse und den folgenden Port darauf zugreifen

Suchen Sie einen Editor, um es sich anzusehen. Ich verwende IDEA, um diesen Ordner zu öffnen und Änderungen vorzunehmen. Die spezifischen Codedateien befinden sich noch im src-Verzeichnis. Gleichzeitig können Sie das Terminal von IDEA auch als cmd oder Terminal mit Administratorrechten konfigurieren, was bequemer sein kann.

So erstellen Sie schnell ein Projekt

Mit HBuilder können Sie relativ schnell ein Projekt erstellen. Sie können direkt ein Vue-Projekt erstellen und es im Terminal ausführen.

Geben Sie in dem Verzeichnis, in dem Sie ein Projekt erstellen möchten, „vue ui“ in das Terminal ein, um die grafische Benutzeroberfläche aufzurufen (diese Methode erfordert vue-cli Version 3.x. Die über vue --version abgefragte Version von vue-cli, beispielsweise 2.9.6, kann nicht verwendet werden. Die verfügbaren Befehle können über vue -h angezeigt werden.)

(II) Eine kurze Einführung in Webpack

(1) Verstehen der Installation

Als wir das Vue-Projekt erstellten, wählten wir Webpack zum Verpacken, aber es war ein automatisierter Prozess. Wir können ihn besser verstehen, wenn wir ihn manuell bedienen.

webpack ist ein statischer Modul-Bundler für moderne JavaScript-Anwendungen. Wenn webpack Ihre Anwendung verarbeitet, erstellt es rekursiv ein Abhängigkeitsdiagramm, das alle Module enthält, die Ihre Anwendung benötigt, und verpackt dann alle diese Module in ein oder mehrere Pakete.
webρack ist das beliebteste modulare Front-End-Ressourcenverwaltungs- und Verpackungstool. Es kann viele lose gekoppelte Module in Front-End-Ressourcen packen, die gemäß Abhängigkeiten und Regeln für die Bereitstellung in der Produktionsumgebung geeignet sind. Sie können den Code von Modulen auch bei Bedarf trennen und sie asynchron laden, wenn sie tatsächlich benötigt werden. Durch die Loader-Konvertierung können Ressourcen jeglicher Art als Module verwendet werden, z. B. Commons, AMD, ES6, CSS, JSON, Coffee Script, LESS usw.;

Installieren Sie webpack und webpack-cli. Wenn npm nicht zu langsam ist, sollten Sie zuerst npm und dann cnpm verwenden.

cnpm installiere webpack -g
cnpm installiere webpack-cli -g

Verwenden Sie webpack -v und webpack-cli -v, um zu überprüfen, ob die Versionsnummer angezeigt wird, um festzustellen, ob die Installation erfolgreich war.

(2) Verwendung von webpack

Erstellen Sie ein Projekt (für IDEA erstellen Sie einfach einen normalen Ordner und öffnen Sie ihn)

Erstellen Sie ein Modulverzeichnis, um JS-Module und andere Inhalte zu platzieren

Erstellen Sie eine Moduldatei unter Modulen, z. B. demo.js, um Code für das JS-Modul zu schreiben, z. B.

exporte.test = Funktion () {
    document.write("<h2>Ideale halten mehr als 20 Jahre</h2>")
}

Erstellen Sie main.js unter Modulen. Dies ist eine Eintragsdatei, die beim Verpacken zum Festlegen von Eintragsattributen verwendet wird.

var demo = erfordern("./demo")
demo.test();

Erstellen Sie zur Konfiguration eine Datei webpack.config.js im Stammverzeichnis des Projekts

modul.exporte = {
    Eintrag: "./modules/main.js",
    Ausgabe: {
        Dateiname: "./js/bundle.js"
    }
};

Geben Sie den Befehl webpack in das Terminal ein, um es zu verpacken (gehen Sie in das Projektverzeichnis und geben Sie webpack ein, dies ist das laufende Ergebnis).

abc@LAPTOP-5T03DV1G MINGW64 /f/entwickeln/IdeaProjects/framework-code/vue/webpack_01_first

$ Webpack

Hash: 7f61ef9440a6bab63058

Version: webpack 4.44.1

Zeit: 334ms

Erstellt am: 05.09.2020 16:18:40 Uhr

Asset-Größen-Chunks Chunk-Namen

./js/bundle.js 1020 Bytes 0 [ausgegeben] main

Einstiegspunkt Haupt = ./js/bundle.js

[0] ./modules/main.js 42 Bytes {0} [erstellt]

[1] ./modules/demo.js 82 Bytes {0} [erstellt]

WARNUNG in der Konfiguration

Die Option „Modus“ wurde nicht festgelegt. Webpack wird für diesen Wert auf „Produktion“ zurückgreifen. Legen Sie die Option „Modus“ auf „Entwicklung“ oder „Produktion“ fest, um die Standardeinstellungen für jedes e zu aktivieren.

Umgebung.

Sie können es auch auf „keine“ setzen, um jedes Standardverhalten zu deaktivieren. Weitere Informationen: https://webpack.js.org/configuration/mode/

Nach dem Verpacken gibt es im Projektverzeichnis einen zusätzlichen dist-Ordner, der einen js-Ordner enthält, der das verpackte js enthält. Erstellen Sie index.html und führen Sie dieses js ein

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
</Kopf>
<Text>
  <script src="dist/js/bundle.js"></script>
</body>
</html>

Der Seiteneffekt ist wie folgt:

Ergänzung: Was könnte in der Konfigurationsdatei stehen?

• entry: Eintragsdatei, gibt an, welche Datei das Web Pack als Eintrag für das Projekt verwendet
• Ausgabe: Ausgabe, geben Sie das Webpaket an, um die verarbeiteten Dateien im angegebenen Pfad zu platzieren
• Modul: Modul, das zur Verarbeitung verschiedener Dateitypen verwendet wird. Plugins: Plugins, wie z. B.: Hot Update, Code-Wiederverwendung usw.
• lösen: Setzen Sie den Pfad auf
• watch: Monitor, wird zum direkten Verpacken nach Dateiänderungen verwendet

(III) Eine kurze Einführung in das Vue Router-Routing

Vue Router ist der offizielle Router für Vue.js. Es ist tief in den Vue.js-Kern integriert und macht das Erstellen von Single-Page-Anwendungen mit Vue.js zum Kinderspiel. Features sind:

Einfach ausgedrückt können wir einige Seitensprünge erreichen. Beispielsweise bleibt der Inhalt unserer Kopfzeile unverändert und der Inhaltsteil muss entsprechend dem Link geändert werden.

• Verschachtelte Routen-/Ansichtszuordnungen
• Modulare, komponentenbasierte Router-Konfiguration
• Routenparameter, Abfragen, Platzhalter
• Sehen Sie Übergangseffekte, die durch das Übergangssystem von Vue.js unterstützt werden
• Feinkörnige Navigationssteuerung
• Links mit automatisch aktiven CSS-Klassen
• HTML5-Verlaufsmodus oder Hash-Modus mit automatischem Fallback in IE9
• Anpassbares Scrollverhalten

Installationsschritte:

Da vue-router ein Plugin-Paket ist, ist die alte Methode immer noch npm/cnpm

npm installiere vue-router --save-dev

Wenn nach der Installation Probleme auftreten, folgen Sie einfach den Anweisungen und geben Sie den entsprechenden Befehl ein. So wie ich auf eine Aufforderung gestoßen bin, npm audit fix einzugeben

Löschen Sie nach dem Erstellen des Projekts die Standardkomponente HelloWorld und erstellen Sie dann zwei benutzerdefinierte Komponenten in Komponenten. Beispielsweise habe ich FirstDemo.vue und Main.vue erstellt. Ersteres ist eine Unterseite und letzteres stellt die Hauptseite dar.

ErsteDemo.vue

<Vorlage>
  <h1>Die erste Demoseite</h1>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "FirstDemo.vue"
  }
</Skript>

<Stilbereich>

</Stil>

Haupt.vue

<Vorlage>
  <h1>Startseite</h1>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "Main.vue"
  }
</Skript>

<Stilbereich>
</Stil>

Erstellen Sie dann den Router-Ordner und die Hauptkonfiguration index.js

Hinweis: Wenn Sie dies in einem modularen Projekt verwenden, müssen Sie die Routing-Funktionalität explizit über Vue.use() installieren.

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
importiere FirstDemo aus '../components/FirstDemo'
importiere Main aus '../components/Main'

Vue.use(VueRouter);

exportiere standardmäßig neuen VueRouter({
  Routen: [
    {
      // Routing-Pfad: "/firstDemo",
      Name: "firstDemo",
      // Sprungkomponente Komponente: FirstDemo
    },
    {
      // Routing-Pfad Pfad: "/main",
      Name: "main",
      // Komponente springen Komponente: Main
    }
  ]
})

Ändern Sie die Eintragsdatei main.js

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias ​​festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren

Vue.config.productionTip = falsch

Vue.use(Router);

/* eslint-deaktivieren Sie no-new */
neuer Vue({
  el: '#app',
  //Konfiguriere den Router,
  Komponenten: {App},
  Vorlage: '<App/>'
})

Neben der formellen Schreibseite, der eingehende Link

<Vorlage>
  <div id="app">
    <h1>Ideale halten mehr als 20 Jahre</h1>
    <router-link to="/main">Startseite</router-link>
    <router-link to="/firstDemo">Die erste Demoseite</router-link>
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<Skript>

  Standard exportieren {
    Name: "App",
  }
</Skript>

<Stil>
  #app {
    Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
    -webkit-font-smoothing: Kantenglättung;
    -moz-osx-font-smoothing: Graustufen;
    Textausrichtung: zentriert;
    Farbe: #2c3e50;
    Rand oben: 60px;
  }
</Stil>

(IV) Grundlegende Verwendung von Vue + ElementUi

Erstellen Sie ein Projekt mit dem Namen vue_03_vue_elementui und installieren Sie die Plugins vue-router, element-ui, sass-loader und node-sass

# Projekt erstellen vue init webpack vue_03_vue_elementui

# Wechseln Sie in das Projektverzeichnis cd vue_03_vue_elementui
# Installieren Sie vue-router
npm installiere vue-router --save-dev
# Installieren Sie e1ement-ui
npm ich element-ui -S
# Abhängigkeiten installieren npm install
# SASS-Loader installieren cnpm install sass-loader node-sass --save-dev
# Starten Sie den Test npm run dev

Ergänzung: Erläuterung des Npm-Befehls

npm install moduleName: Installiert das Modul im Projektverzeichnis

npm install -g moduleNMame: -g bedeutet, das Modul global zu installieren. Der genaue Installationsort auf der Festplatte hängt vom Speicherort des npm-Konfigurationspräfixes ab.

npm install - save moduleName: --save bedeutet, das Modul im Projektverzeichnis zu installieren und die Abhängigkeit in den Abhängigkeitsknoten der Paketdatei zu schreiben. -S ist die Abkürzung dieses Befehls.

npm install -save -dev moduleName: --save-dev bedeutet, das Modul im Projektverzeichnis zu installieren und die Abhängigkeit in den Knoten devdependencies der Paketdatei zu schreiben. -D ist die Abkürzung des Befehls.

Anschließend können Sie es im Editor öffnen. Dies hängt von Ihrer persönlichen Wahl ab. Ich verwende IDEA, um es hier zu öffnen. Achten Sie nach dem Öffnen darauf, ob der Router-Sass und andere Inhalte erfolgreich im Modulordner installiert wurden.

Löschen Sie dann die Standardkomponente „HelloWorld“ und das Standardlogo, beginnen Sie mit dem Schreiben des Codes und erstellen Sie einen Ansichtsordner zum Speichern von Ansichten.

Erstellen Sie Login.vue und Main.vue

Anmelden.vue

<Vorlage>
  <h1>Hauptseite</h1>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "Main.vue"
  }
</Skript>

<Stilbereich>
</Stil>

Haupt.vue

<Vorlage>
  <div>
    <el-form ref="loginForm" :model="form" :rules="Regeln" label-width="80px" class="login-box">
      <h3 class="login-title">Willkommen beim Anmelden</h3>
      <el-form-item label="Konto" prop="Benutzername">
        <el-input type="text" placeholder="Bitte geben Sie Ihre Kontonummer ein" v-model="form.username"/>
      </el-form-item>
      <el-form-item label=" Passwort " prop="password">
        <el-input type="password" placeholder="Bitte geben Sie Ihr Passwort ein" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">Anmelden</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      Titel="Warme Tipps"
      :visible.sync="dialogSichtbar"
      Breite="30%"
      :before-close="handLeClose">
      <span>Bitte geben Sie Ihr Konto und Ihr Passwort ein</span>
      <span slot="Fußzeile" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">OK</el-button>
      </span>
    </el-dialog>
  </div>

</Vorlage>


<Skript>
  Standard exportieren {
    Name: "Login",
    Daten() {
      zurückkehren {
        bilden: {
          Benutzername: '',
          Passwort: ''
        },
        //Formularvalidierung, Sie müssen Prop-Attributregeln im Element „el-form-item“ hinzufügen: {
          Benutzername: [
            {erforderlich: true, Nachricht: „Konto darf nicht leer sein“, Auslöser: ‚blur‘}
          ],
          Passwort: [
            {erforderlich: true, Meldung: „Das Passwort darf nicht leer sein“, Auslöser: ‚blur‘}
          ]
        },
        //Dialogfeld anzeigen und ausblenden dialogVisible: false
      }
    },
    Methoden: {
      beim Absenden(Formularname) {
        //Validierungsfunktion an das Formular binden this.$refs[formName].validate((valid) => {
          if (gültig) {
            //Verwenden Sie vue-router, um zur angegebenen Seite zu gelangen. Diese Methode wird als programmgesteuerte Navigation bezeichnet. this.$router.push("/main");
          } anders {
            this.dialogVisible = true;
            gibt false zurück;
          }
        });
      }
    }
  }
</Skript>


<style lang="scss" scoped>
  .login-box {
    Rand: 1px durchgezogen #DCDFE6;
    Breite: 350px;
    Rand: 40px automatisch;
    Polsterung: 35px 35px 15px 35px;
    Rahmenradius: 5px;
    -Webkit-Randradius: 5px;
    -moz-Randradius: 5px;
    Kastenschatten: 0 0 25px #909399;
  }

  .login-titel {
    Textausrichtung: zentriert;
    Rand: 0 automatisch 40px automatisch;
    Farbe: #303133;
  }
</Stil>

Erstellen Sie einen Router-Ordner und index.js darin und konfigurieren Sie den Umleitungsinhalt

index.js

Vue von „vue“ importieren
VueRouter von „vue-router“ importieren
Login aus '../views/Login' importieren
importiere Main aus '../views/Main'

Vue.use(VueRouter);

exportiere standardmäßig neuen VueRouter({
  Routen: [
    {
      Pfad: "/main",
      Komponente: Main
    },
    {
      Pfad: "/login",
      Komponente: Login
    }
  ]
})

Ändern Sie main.js und verwenden Sie Router und Elementui. Router habe ich bereits erwähnt. Was Letzteres betrifft, können Sie es verstehen, indem Sie der Dokumentation für den Einstieg auf der offiziellen Website folgen.

https://element.eleme.cn/#/zh-CN/component/quickstart

Haupt-JS

Vue von „vue“ importieren
App aus „./App“ importieren

Router aus „./router“ importieren
importiere ElementUI von „element-ui“;
importiere „element-ui/lib/theme-chalk/index.css“;

Vue.config.productionTip = falsch;

Vue.use(Router);
Vue.use(ElementUI);

/* eslint-deaktivieren Sie no-new */
neuer Vue({
  el: '#app',
  Router,
  rendern: h => h(App)
});

App.vue

<Vorlage>
  <div id="app">
    <h1>Ideale halten mehr als 20 Jahre</h1>
    <router-link to="/main">Startseite</router-link>
    <router-link to="/login">Anmeldeseite</router-link>
    <Router-Ansicht></Router-Ansicht>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

Nachdem wir es nun geschrieben haben, können wir mit dem Ausführen beginnen. Beim Ausführen treten jedoch die folgenden Fehler auf

TypeError [ERR_INVALID_ARG_TYPE]: Das Argument „path“ muss vom Typ „String“ sein. Empfangener Typ undefiniert

Modulerstellung fehlgeschlagen: TypeError: this.getResolve ist keine Funktion

Nach der Überprüfung habe ich die Version von sass-loder in package.json im Projektverzeichnis von 10.0.2 auf 8.0.2 auf 7.3.1 geändert, bevor ich es normal über npm run dev ausführen konnte

"sass-loader": "^7.3.1",

Hinweis: Nach dem Ändern der Konfiguration müssen Sie npm install oder cnpm install erneut ausführen

Zeigen Sie den endgültigen Effekt:

Klicken Sie auf den Startseiteneffekt:

Klicken Sie auf den Effekt der Anmeldeseite:

5. Einfacher Fall der Vue- und Java-Dateninteraktion

Schließlich fand ich ein fertiges Beispiel für eine bestimmte Website und leitete es einfach für eine Weile, was auch die grundlegende Grammatik zu Beginn konsolidierte.

/user/findall,/user/indbyId,/user/updateUser

Es handelt sich um eine einfache Abfrage und eine Aktualisierungsoperation.

Benutzer der öffentlichen Klasse implementiert serialisierbar {	
	private Integer-ID;
    privater String-Benutzername;
    privates String-Passwort;
    privates ganzzahliges Alter;
    privater String Sex;
    private Zeichenfolge E -Mail;
    ......
}

Die Schlüsselcodes für die auf der Seite empfangenen Daten sind wie folgt

Zunächst werden alle Benutzerdaten angezeigt.

<tr v-for = "u in UserList">
  <td> <input name = "ids" type = "checkBox"> </td>
  <td> {{u.id}} </td>
  <td> {{u.username}}
  </td>
  <td> {{u.password}} </td>
  <td> {{U.Sex}} </td>
  <td> {{u.age}} </td>
  <td class = "text-center"> {{u.email}} </td>
  <td Klasse="text-center">
    <schaltetyp = "button" class = "btn bg-olive btn-xs"> Details </button>
    <button type = "button" class = "btn bg-olive btn-x" @click = "findById (u.id)"> bearbeiten </button>
  </td>
</tr>

Nach dem Klicken auf Bearbeiten wird die Abfragemethode für den aktuellen Benutzer für Echo ausgeführt.

<div Klasse="Kastenkörper">
  <div class = "form-horizontal">


    <div Klasse="Formulargruppe">
      <label class = "col-sm-2 Control-Label"> Benutzername: </label>
      <div class = "col-sm-5">
        <Eingabe type = "text" class = "Form-kontroll" v-Model = "user.username">
      </div>
    </div>
    <div Klasse="Formulargruppe">
      <label class = "col-sm-2 Control-Label"> Passwort: </label>
      <div class = "col-sm-5">
        <Eingabe type = "text" class = "Form-kontroll" v-Model = "user.password">
      </div>
    </div>
    <div Klasse="Formulargruppe">
      <label class = "col-sm-2 Control-Label"> Geschlecht: </label>
      <div class = "col-sm-5">
        <Eingabe type = "text" class = "Form-kontroll" v-model = "user.sex">
      </div>
    </div>
    <div Klasse="Formulargruppe">
      <label class = "col-sm-2 Control-Label"> Alter: </label>
      <div class = "col-sm-5">
        <Eingabe type = "text" class = "Form-kontroll" v-Model = "user.age">
      </div>
    </div>
    <div Klasse="Formulargruppe">
      <label class = "col-SM-2 Control-Label"> E-Mail: </label>
      <div class = "col-sm-5">
        <Eingabe type = "text" class = "Form-kontroll" v-Model = "user.email">
      </div>
    </div>
  </div>
</div>

Um die Dateninteraktion zu erreichen, ist das Wichtigste, die Daten zu definieren und Axios für asynchrone Anforderungen zu verwenden

var vue = neuer Vue({
    el: "#app",
    Daten: {
        Benutzer: {ID: "", Benutzername: "", Passwort: "", Alter: "", Sex: "", E -Mail: ""},
        Benutzerliste: []
    },
    Methoden: {
        findall: function () {
            var _this = dies;
            Axios.get ("Benutzer/findall.do"). Dann (Funktion (Antwort) {
                _this.userList = response.data;
                console.log (_this.userList);
            }).catch(Funktion (Fehler) {
                console.log(fehler);
            });
        },
        findById: function (userId) {
            var _this = dies;
            Axios.get ("Benutzer/findById.do", {
                Parameter: {
                    ID: UserId
                }
            }).dann(Funktion (Antwort) {
                _this.user = response.data;
                $ ('#MyModal'). Modal ("Show");
            }).catch(Funktion (Fehler) {
            });

        },
        UPDATE: Funktion (Benutzer) {
            var _this = dies;
            axios.post ("user/updateUser.do", _this.user) .then (Funktion (Antwort) {
                _this.findall ();
            }).catch(Funktion (Fehler) {
            });
        }
    },
    erstellt() {
        this.findall ();
    }
});

Der obige Code ist wirklich einfach zu verstehen. Methoden werden in Methos erstellt.

HINWEIS: Der Inhalt in. Dann wird ausgeführt, nachdem die Anforderung erfolgreich ist, und der Inhalt in .Catch wird ausgeführt, nachdem die Anforderung fehlschlägt.

HINWEIS: Der kritische Inhalt besteht darin, Var _this = vor Axios zu definieren. .

Die Wirkung ist wie folgt:

Alle durchsuchen

Fragen Sie den aktuellen Benutzer ab und ändern Sie

Das oben genannte Inhalt der detaillierten Einführungsnotizen von VUE.