Detaillierte grafische Erklärung von Vue.js

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung von Vue.js mit Bildern und Text. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue.js, schauen wir uns das an.

Vue.js ist derzeit eines der beliebtesten und vielversprechendsten Front-End-Frameworks und bietet ein neues Denkmodell, das uns hilft, schnell Front-End-Projekte aufzubauen und zu entwickeln. Dieser Artikel soll jedem helfen, Vue.js zu verstehen, den Entwicklungsprozess von Vue.js zu verstehen und besser zu verstehen, wie man mit Vue.js ein mittleres bis großes Front-End-Projekt erstellt und gleichzeitig entsprechende Bereitstellungs- und Optimierungsarbeiten durchführt.

Der Artikel wird in Form eines PPT-Bildes mit Texteinleitung entwickelt und enthält keinen spezifischen Code des Wissenspunkts. Klicken Sie einfach dort. Interessierte Studierende können die entsprechenden Unterlagen einsehen, um mehr zu erfahren.

Einführung in Vue.js

Aus der Einführung im Bild oben ist es nicht schwer zu erkennen, dass Vue.js ist ein Leichtgewicht. Es handelt sich um ein datengesteuertes Front-End-JS-Framework. Der größte Unterschied zwischen ihm und jQuery besteht darin, dass jQuery die Anzeige der Seite durch Manipulation des DOM ändert, während Vue die Aktualisierung und Anzeige der Seite durch Manipulation von Daten realisiert. Das Folgende ist das datengesteuerte Konzeptmodell von Vue:

Vue.js ist hauptsächlich für das grüne Würfel-ViewModel im Bild oben verantwortlich, das sich zwischen der Ansichtsebene (d. h. DOM-Schicht) und die Modellschicht (d. h. die JS-Logikschicht) sind über ViewModel an DOM-Listener und Daten-Bingings gebunden, zwei Dinge, die Listenern entsprechen.

Wenn sich die Ansicht der Ansichtsebene ändert, hört Vue zu und ändert die Daten der Modellebene über DOM-Listener. Im Gegenteil, wenn sich die Daten der Modellebene ändern, wird auch die Anzeige der Ansichtsebene durch Daten-Bingings überwacht und geändert. Dadurch wird eine bidirektionale Datenbindungsfunktion erreicht, die auch das Prinzip des Datenlaufwerks von Vue.j ist.

Vue-Instanz

In einer HTML-Datei können wir Vue direkt über das Skript-Tag einführen. js, und dann können Sie Vue.js-Code in die Seite schreiben. Im Bild oben haben wir eine Vue-Instanz über new Vue() erstellt. In der Instanz kann sie hängende Elemente (el), Daten (data), Vorlagen (template), Methoden (methods) und LebenszyklusHooks (erstellt usw.) und andere Optionen. Verschiedene Instanzoptionen haben unterschiedliche Funktionen, wie zum Beispiel:

(1) el gibt an, welchen Bereich unter dem Element unser Vue bedienen muss, und „#demo“ bedeutet, dass der Bereich unter dem Element mit der ID demo betrieben werden soll.

(2) Daten stellen das Datenobjekt der Vue-Instanz dar, und die Datenattribute können auf Datenänderungen reagieren.
(3) „created“ gibt den Schritt im Lebenszyklus der Instanz an, wenn die Erstellung abgeschlossen ist. Wenn die Instanz erstellt wurde, wird ihre Methode aufgerufen.

Allgemeine Vue-Anweisungen

Bei der Entwicklung von Vue-Projekten sollten wir diejenige sein, die wir am häufigsten verwenden Es ist ein Vue-Befehl. Durch die von Vue bereitgestellten allgemeinen Anweisungen können wir die leistungsstarken Funktionen des Datenlaufwerks von Vue vollständig nutzen. Das Folgende ist eine kurze Einführung in die häufig verwendeten Anweisungen im Bild:

(1) V-Text: Wird zum Aktualisieren des Inhalts im gebundenen Element verwendet, ähnlich der text()-Methode von jQuery

(2 ) v- html: wird verwendet, um den HTML-Inhalt im gebundenen Element zu aktualisieren, ähnlich der html()-Methode von jQuery
(3) v-if: wird verwendet, um das Element basierend auf den wahren und falschen Bedingungen des Werts von zu rendern Ausdruck, wenn P3 im obigen Bild ist Wenn falsch, wird das P-Tag nicht gerendert
(4) v-show: Wird verwendet, um ausgeblendete Elemente basierend auf den wahren und falschen Bedingungen des Ausdruckswerts anzuzeigen und die Anzeige umzuschalten CSS-Attribut des Elements
(5) v-for: Verwendung Zum Durchlaufen von Daten zum Rendern von Elementen oder Vorlagen. Wenn P6 in der Abbildung [1,2,3] ist, werden 3 P-Tags gerendert und der Inhalt ist 1, 2, 3
(6) v-on: wird für Elemente verwendet, die Ereignisse binden. Im Bild ist das Klickereignis von showP3 an das P-Tag gebunden.

Weitere Vue-Anweisungen finden Sie hier das Vue2.0-Dokument, Adresse: https://vuefe.cn/api/# Commands

Vue.js Technologie-Stack

Wir haben oben erwähnt, dass Sie Vue-Code direkt in eine HTML-Seite schreiben können, indem Sie Vue.js einführen, aber diese Methode wird nicht häufig verwendet. Denn wenn unser Projekt relativ groß ist, wird es viele Seiten im Projekt geben. Sobald jede Seite eine Vue.js einführt oder eine Vue-Instanz deklariert, wirkt sich dies sehr nachteilig auf die spätere Wartung und Codefreigabe aus und es kommt auch zu Konflikten mit Instanznamen . Situation, daher müssen wir den von Vue bereitgestellten Technologie-Stack verwenden, um ein leistungsstarkes Front-End-Projekt zu erstellen.

Zusätzlich zu Vue.js müssen wir auch Folgendes verwenden:

(1) vue-cli: Vues Gerüsttool, das zum automatischen Generieren der Verzeichnisse und Dateien des Vue-Projekts verwendet wird.
(2) Vue-Router: Das von Vue bereitgestellte Front-End-Routing-Tool. Wir verwenden es, um die Seitenrouting-Steuerung, teilweise Aktualisierung und Laden bei Bedarf zu implementieren, Einzelseitenanwendungen zu erstellen und Front-End und Back zu realisieren -Ende der Trennung.
(3) vuex: Das von Vue bereitgestellte Statusverwaltungstool wird verwendet, um die Interaktion und Wiederverwendung verschiedener Daten in unseren Projekten zu verwalten und die von uns benötigten Datenobjekte zu speichern.
(4) ES6: Eine neue Version von Javascript, kurz für ECMAScript6. Mit ES6 können wir unseren JS-Code vereinfachen und gleichzeitig die leistungsstarken Funktionen nutzen, die es bietet, um JS-Logik schnell zu implementieren.
(5) NPM: Paketverwaltungstool von node.js, das zur einheitlichen Verwaltung der Pakete, Plug-Ins, Tools, Befehle usw. verwendet wird, die in unseren Front-End-Projekten benötigt werden, um die Entwicklung und Wartung zu erleichtern.
(6) Webpack: Ein leistungsstarkes Tool zum Packen von Dateien, das unsere Front-End-Projektdateien gleichzeitig in js verpacken und komprimieren kann und eine Syntaxkonvertierung und das Laden über Loader wie Vue-Loader erreichen kann.
(7) Babel: Ein Plug-in, das ES6-Code in browserkompatiblen ES5-Code umwandelt

Mit den oben genannten Technologien können wir mit dem Aufbau unseres Vue-Projekts beginnen.

Erstellen großer Anwendungen

Beim Erstellen unserer mittleren und großen Vue-Projekte stellen wir hauptsächlich vor, wie das geht Verwenden Sie vue-cli, um das Front-End-Verzeichnis und die Dateien unseres Projekts automatisch zu generieren. Verstehen Sie das Konzept, dass alles in Vue eine Komponente ist, und die Kommunikationsprobleme von Eltern-Kind-Komponenten. Erklären Sie, wie wir Plug-Ins von Drittanbietern verwenden Vue-Projekt und verwenden Sie schließlich Webpack, um unser Projekt zu verpacken und bereitzustellen.

vue-cli build

Bevor wir vue-cli verwenden, müssen wir node.js installieren und den darin bereitgestellten npm-Befehl verwenden um vue-cli zu installieren. Um node.js zu installieren, müssen Sie nur die offizielle Website aufrufen, um die Software herunterzuladen und zu installieren. Die Adresse lautet: https://nodejs.org/en/

Nachdem die Installation abgeschlossen ist Öffnen Sie das cmd-Befehlszeilentool des Computers und geben Sie das obige Bild nacheinander ein:

(1) npm install -g vue-cli: vue-cli global installieren
(2) vue init webpack my-project: Verwenden Sie vue-cli, um ein Webpack-basiertes Projekt an der Verzeichnisadresse zu generieren. Die Vue-Projektdatei und das Verzeichnis mit dem Namen „my-project“
(3) cd my-project: Öffnen Sie den gerade erstellten Ordner
(4) npm intall: Installieren Sie die Paketdateien, von denen das Projekt abhängt
(5) npm run dev: Verwenden Sie den lokalen Knotenserver, um die Projektseite im Browser zu öffnen und zu durchsuchen

Auf diese Weise , unser Webpack-basiertes Vue-Projektverzeichnis ist erstellt.

Einzelne Dateikomponente

Im gerade erstellten Vue-Projekt finden wir eine App .vue und Hello.vue-Dateien, dann sind Dateien, die mit dem .vue-Suffix wie diesem enden, übliche Einzeldateikomponenten in unseren Vue-Projekten. Eine einzelne Dateikomponente enthält HTML, JS und CSS einer Funktion oder eines Moduls. In der .vue-Datei können wir HTML in das Template-Tag, JS in das Script-Tag und CSS in das Style-Tag schreiben. Eine solche Funktion oder ein solches Modul ist eine .vue-Komponente, die sich auch sehr praktisch für die gemeinsame Nutzung von Komponenten und die spätere Wartung eignet.

Eltern-Kind-Komponentenkommunikation

Dann so bei der Entwicklung von Projekten mit einzelnen Dateikomponenten Im Kern werden wir uns auf jeden Fall eine Frage vorstellen: Wie tauschen übergeordnete und untergeordnete Vue-Komponenten Daten aus, um eine Kommunikation zu erreichen? In Vue2.0 werden Requisiten bereitgestellt, um übergeordneten Komponenten die Weitergabe von Daten an untergeordnete Komponenten zu ermöglichen, und $emit wird verwendet, um untergeordneten Komponenten die Weitergabe von Daten an übergeordnete Komponenten zu ermöglichen. Wenn es sich um eine komplexere und allgemeinere Dateninteraktion handelt, wird natürlich empfohlen, Vuex zu verwenden, um die Daten einheitlich zu verwalten. Einzelheiten finden Sie unter: https://vuefe.cn/guide/components.html#Use Props to pass data

Plug-in-Nutzung

Als nächstes stellen wir vor, wie wir Plug-Ins in Webpack-basierten Vue-Projekten verwenden. Es gibt zwei Hauptsituationen:

(1) Globale Verwendung

(1) Eingeführt in index.html: Diese Methode wird nicht empfohlen, da ein Problem mit der Ladereihenfolge vorliegt und einige Plug-Ins diese Methode nicht unterstützen.
(2) Eingeführt durch die Webpack--Konfigurationsdatei : Wird hauptsächlich über die webpack.ProvidePlugin()-Methode des Plugin-Konfigurationselements implementiert, ist jedoch nur für Plug-Ins geeignet, die die CommonJs-Spezifikation unterstützen Stellen Sie eine globale Variable bereit, z. B. in jQuery $.
(3) Einführung durch Import + Vue.use(): Diese Methode erfordert den Import des Plug-Ins, das in die globale .vue-Datei geladen werden muss, und die anschließende Implementierung über Vue.use('Plugin-Variablenname' ), aber diese Methode Es werden nur Plug-Ins unterstützt, die den Plug-In-Schreibspezifikationen von Vue.js folgen, wie z. B. vue-resource.

(2) Verwendung einer einzelnen Datei

(1) Direkte Einführung durch Import: Diese Methode kann in .vue-Dateien verwendet werden, die Plug-Ins aufrufen müssen, muss jedoch beachtet werden die Reihenfolge der Erstellung von Instanzen, oder sie kann auch über require eingeführt werden.

(2) Import + Komponentenregistrierung: Diese Methode ist die Methode zur Verwendung der Vue-Komponente. Sie können eine Unterkomponente in einer Komponente registrieren und verwenden.

Bereitstellung und Optimierung

Nachdem wir die Front-End-Codierungsphase des gesamten Vue abgeschlossen haben Projekt, das wir benötigen Die wichtigsten Möglichkeiten zum Bereitstellen und Optimieren unserer Front-End-Projektdateien sind wie folgt:

(1) Verwenden Sie das DefinePlugin des Webpacks, um die Produktionsumgebung anzugeben: Über die DefinePlugin-Konfiguration im Plugin können wir deklarieren Das Attribut „process.env“ ist „Development“ (Entwicklungsumgebung) oder „Production“ (Produktionsumgebung). Es ist sehr praktisch, den Umgebungsmodus zu wechseln, indem der Befehl „scripts“ in der npm-Konfigurationsdatei package.json kombiniert wird.

(2) Verwenden Sie UglifyJs, um Warnanweisungen in Codeblöcken automatisch zu löschen: Wird im Allgemeinen in der Webpack-Konfigurationsdatei der Produktionsumgebung verwendet und über das neue webpack.optimize.UglifyJsPlugin () konfiguriert. Durch das Löschen von Warnanweisungen kann die Datei verkleinert werden Größe Volumen.

(3) Verwenden Sie Webpack-Hash, um das Caching zu verwalten: Wenn wir eine online veröffentlichte Datei ändern müssen und der neu kompilierte Dateiname mit dem der vorherigen Version übereinstimmt, erkennt der Browser ihn nicht und lädt die zwischengespeicherte Datei . Problem. Auf diese Weise müssen wir automatisch Dateinamen mit Hash-Werten generieren, um ein Zwischenspeichern zu verhindern. Einzelheiten finden Sie unter: https://segmentfault.com/a/1190000006178770#articleHeader7

(4) Verwenden Sie v-if, um unnötiges Laden von Komponenten zu reduzieren: Die v-if-Anweisung ist tatsächlich sehr nützlich, sie kann helfen Unser Projekt Komponenten, die vorübergehend nicht benötigt werden, werden nicht gerendert, sondern nur dann gerendert, wenn sie benötigt werden, z. B. eine Popup-Fensterkomponente usw. Auf diese Weise können wir die erste Ladezeit und die Dateigröße der Seite reduzieren.

Zusätzlich zu den oben genannten Optimierungen gibt es viele Optimierungsmöglichkeiten, die sich die API-Dokumentation von Webpack ansehen kann.

Datengesteuertes Beispiel##

Zusammenfassung

Dieser Artikel ist beigefügt mit PPT-Bildern Es stellt kurz die Wissenspunkte und den Entwicklungsprozess von Vue.js in Form einer Texteinführung vor, geht durch die Konzepte von Front-End-Automatisierung, Komponentisierung und Engineering und erklärt Vue.js „Einfach, aber doch komplex“ von flach bis tief. Der einzigartige Charme von „Eleganz, ohne an Eleganz zu verlieren, Kompaktheit, ohne zu anspruchsvoll zu sein“

Ich glaube, Sie haben die Methode nach der Lektüre dieser Fälle gemeistert. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

Verwenden von Video.js zur Implementierung der H5-Live-Broadcast-Schnittstelle

Detaillierte Erläuterung des Pfadmoduls von node.js

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!