Erläuterung der *.Vue-Dateien in Vue.js-js-Tutorial-php.cn

vue.js ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Es verwendet ein inkrementelles Bottom-up-Entwicklungsdesign. (Die Bottom-up-Entwurfsmethode basiert auf den funktionalen Anforderungen des Systems, ausgehend von bestimmten Geräten, Logikkomponenten oder ähnlichen Systemen, und stützt sich auf die Fachkenntnisse und die reiche Erfahrung des Designers, um diese zu verbinden, zu modifizieren und zu erweitern, um das erforderliche System zu bilden.) Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene. Sie ist nicht nur einfach zu starten, sondern auch einfach in Bibliotheken von Drittanbietern oder bestehende Projekte zu integrieren. Andererseits ist Vue auch in der Lage, komplexe Einzelseitenanwendungen zu betreiben, wenn es mit Einzeldateikomponenten und Bibliotheken kombiniert wird, die vom Vue-Ökosystem unterstützt werden.

Was ist eine *.vue-Datei?

Zuallererst sind wir in dem Projekt, das wir mit dem Vue-Cli-Gerüst erstellt haben, auf viele Dateien gestoßen, wie zum Beispiel index.vue oder App.vue. Was zum Teufel ist das? Wenn Sie neu in der Vue-Entwicklung sind, haben Sie dieses Ding vielleicht noch nie zuvor gesehen. Die *.vue-Datei ist ein benutzerdefinierter Dateityp, der eine HTML-ähnliche Syntax zur Beschreibung einer Vue-Komponente verwendet. Jede .vue-Datei enthält drei Arten von Sprachblöcken der obersten Ebene: , . Diese drei Teile repräsentieren jeweils HTML, JS und CSS.

Unter anderem unterstützen das Schreiben in vorkompilierter Sprache. In unserem Projekt verwenden wir beispielsweise die SCSS-Vorkompilierung, also schreiben wir es so:

Nach dem Login kopieren

HTML verfügt auch über eine eigene Vorkompilierungssprache, vue unterstützt es auch, aber im Allgemeinen bevorzugen unsere Front-End-Mitarbeiter immer noch die Muttersprache HTML, daher werde ich nicht zu sehr darauf eingehen.

Zusätzlich habe ich den Satz @import „./style/style“ in der App.vue-Datei verwendet, um unseren Stil an die angegebene Stelle zu schreiben. Daher wird dieser Teil des Inhalts nicht in allen meinen folgenden Artikeln erscheinen. Alle Stile werden an den entsprechenden Stellen im Ordner src/style/ geschrieben. Dies hat den Vorteil, dass ich nicht wiederholt verschiedene SCSS-Basisdateien einführen muss und den Stilcode des Projekts steuern kann.

*.vue-Dateicode-Analyse

Lassen Sie uns zunächst einen kurzen Blick darauf werfen:

import Header from '../components/header.vue' import Footer from '../components/footer.vue' export default { components: { Header, Footer }, data () { return { list: [] } }, created () { this.getData() }, methods: { getData () { this.$api.get('topics', null, r => { console.log(r) }) } } } .article_list {margin: auto;} Nach dem Login kopieren

Das Obige ist die Grundstruktur einer einfachen *.vue-Datei. Lassen Sie es uns Teil für Teil erklären.

Vorlagenteil

Unten nenne ich es nicht mehr eine *.vue-Datei. Zur Vue-Komponente geändert. Erstens ist es eine Vue-Komponente, deren Vorlage ihre HTML-Struktur darstellt. Ich glaube, jeder kann sie verstehen. Es sollte jedoch beachtet werden, dass wir nicht sagen, dass es ausreicht, den Code in einzuschließen, sondern dass ein HTML-Tag darin platziert werden muss, um den gesamten Code einzuschließen. In diesem Beispiel verwenden wir das Tag

Jeder muss sehr überrascht sein, wenn er den Code sieht. Tatsächlich handelt es sich hierbei um eine benutzerdefinierte Komponente. Wir haben an anderer Stelle eine Komponente geschrieben und können sie dann auf diese Weise vorstellen. Ebenso ist

Skriptteil

Zuerst benötigen wir zwei benutzerdefinierte Komponenten, die wir zuerst zitieren. Das folgende Format ist leichter zu verstehen.

import Header from '../components/header.vue' import Footer from '../components/footer.vue' Nach dem Login kopieren

Zweitens verpacken wir mit Ausnahme der referenzierten Dateien den gesamten Code in den folgenden Code:

export default { // 这里写你的代码，外面要包起来。 } Nach dem Login kopieren

Wir haben zunächst die Quelldateien der beiden Komponenten Header und Footer eingeführt. Als nächstes müssen wir die referenzierten Komponenten in Komponenten deklarieren. Auf diese Weise können wir es in einer Vorlage verwenden.

components: { Header, Footer }, Nach dem Login kopieren

Daten sind unsere Daten. Unser Democode liefert leere Array-Daten einer Liste. In der Vorlage können wir this.list verwenden, um unsere Daten zu verwenden. Wir werden in einem späteren Artikel darüber sprechen, daher gehen wir hier nicht auf Details ein, sondern lernen es einfach kennen.

data () { return { list: [] } }, Nach dem Login kopieren

erstellt stellt dar, was ausgeführt werden muss, wenn unsere Komponente geladen wird. Hier lassen wir beispielsweise die Komponente eine Funktion namens this.getData() ausführen, wenn der Ladevorgang abgeschlossen ist. Darüber hinaus istcreated eine der Hook-Funktionen in vuejs. (Spezifische Hook-Funktionen finden Sie im Anhang.)

created () { this.getData() }, Nach dem Login kopieren

Methoden sind die Methoden unserer Komponente, die auch als Funktionen bezeichnet werden können. Der obige Code zeigt beispielsweise an, dass unsere Komponente eine Methodenfunktion namens getData() angepasst hat.

methods: { getData () { this.$api.get('topics', null, r => { console.log(r) }) } } Nach dem Login kopieren

Stilteil

Das ist relativ einfach. Schreiben Sie einfach einige Stile für die HTML-Elemente, die im Inhalt unserer Vorlage erscheinen . Wie folgt mein Code:

.article_list {margin: auto;} Nach dem Login kopieren

An diesem Punkt sollten wir ein gewisses Verständnis für Vue-Komponentendateien haben. In den folgenden Blog-Beiträgen werden verschiedene Schreibmethoden behandelt. Daher wird empfohlen, dass Sie nach dem Lesen dieses Artikels mehr Zeit damit verbringen, die offizielle Dokumentation von vue zu lesen. Obwohl Sie möglicherweise nicht alle Dokumente verstehen können, müssen Sie über ein allgemeines Verständnis verfügen, da sonst das folgende Lernen schwieriger wird.

Anhang

Hook kann als Lebenszyklus von Vuejs verstanden werden, während Funktionen Ereignismethoden in jeder Phase des Lebenszyklus sind. Wie unten gezeigt

Verwandte Empfehlungen:

Eine Zusammenfassung praktischer vue.js-Projekttipps

Vue. Einführung in die Implementierungsmethode geteilter js-Komponenten

Was sind die häufig verwendeten Anweisungen in Vue.js