Warum vue.js verwenden? Warum verwenden 46 % der Frontend-Entwickler es?

Zusammenfassung in einem Satz: Mit der Idee der Datenbindung kann Vue einfach eine einzelne Seite, ein großes Front-End-System oder die Schnittstelle einer mobilen App schreiben.

1. Was ist Vue.js?

● Progressiver Rahmen

● Design für inkrementelle Bottom-up-Entwicklung

● Leicht zu erlernen

● Einfach zu integrieren

Vue.js (ausgesprochen /vju?/, ähnlich wie view) ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Schwergewichts-Frameworks verwendet Vue ein inkrementelles Bottom-up-Entwicklungsdesign. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene und ist sehr einfach zu erlernen und in andere Bibliotheken oder bestehende Projekte zu integrieren. Vue hingegen ist vollständig in der Lage, komplexe Single-Page-Anwendungen zu betreiben, die mit Single-File-Komponenten und Bibliotheken entwickelt werden, die vom Vue-Ökosystem unterstützt werden.

[Empfohlene Kurse: vuejs-Tutorial]

2. Für welche Art von Schnittstelle ist vue.js geeignet?

a. Es gibt viele Formularelemente

b Der Inhalt muss entsprechend den Vorgängen des Benutzers geändert werden

Vue.js ist ein Tool Zum Erstellen von Webseiten handelt es sich ähnlich wie bei Zhihu um eine webbasierte Anwendung mit vielen Formularelementen, deren Inhalt je nach Benutzervorgängen geändert werden muss.

3. Was ist eine Single Page Application (SPA)?

Eine Seite ist eine Anwendung (Unteranwendung)

Wie der Name schon sagt, bezieht sich eine Einzelseitenanwendung im Allgemeinen auf eine Seite, die eine Anwendung ist Es kann sich beispielsweise auch um eine Unteranwendung handeln. Eine Seite auf Zhihu kann als Unteranwendung betrachtet werden. In Einzelseitenanwendungen gibt es im Allgemeinen viel interaktive Verarbeitung, und der Inhalt der Seite muss sich entsprechend den Vorgängen des Benutzers dynamisch ändern.

4. Ich kann JQuery auch verwenden, um die zuvor erwähnte Webversion von Zhihu zu schreiben.

a. Produkte müssen unbedingt wiederholt geändert werden

b Änderungen können zu Änderungen in der Assoziations- und Verschachtelungsebene des DOM führen, wodurch sich der Code ändert zur JQuery-Struktur ist äußerst komplex

c und vue.js können dieses Problem lösen

Erinnern Sie sich noch daran, dass Sie ('#xxx').parent geschrieben haben, als Sie JQuery zum ersten Mal geschrieben haben? ().parent Was ist mit Code wie ().parent()? Wenn Sie zum ersten Mal schreiben, haben Sie das Gefühl, dass es nicht viele Elemente auf der Seite gibt. Müssen Sie also nicht einfach den Vater dieses Elements finden? deutlich in den Kommentaren. Wenn Ihr Projektteamleiter oder Ihr Produktmanager jedoch in ein paar Tagen plötzlich Änderungen an der von Ihnen erstellten Webseite anfordert, wirkt sich diese Änderungsanforderung auf die Struktur der Seite aus, dh die Zuordnungs- und Verschachtelungsebene des DOM ändert sich ('#xxx').parent().parent().parent() kann zu $('#xxx').parent().parent().parent().parent().parent( ) werden.

Das ist nichts. Wenn die Produktiteration in Zukunft immer schneller wird, es immer mehr Änderungen gibt und mehr als ein ähnliches verknüpftes und verschachteltes DOM-Element auf der Seite vorhanden ist, wird es sehr sein mühsam zu modifizieren. Darüber hinaus kommt es bei der Suche nach Seitenelementen des JQuery-Selektors und bei der DOM-Operation selbst zu Leistungseinbußen. Wenn es an der Zeit ist, diese Seite zu öffnen, bleibt sie möglicherweise immer mehr hängen und Sie haben keine Möglichkeit mehr, anzufangen.

Wenn Sie Vue.js zu diesem Zeitpunkt gelernt haben, werden diese Beschwerden nicht mehr bestehen.

5. Auf welche Ansichtsebene wird im Frontend häufig Bezug genommen?

Wir können das DOM in HTML unabhängig von anderen Teilen in eine Ebene unterteilen. Diese Ebene wird als Ansichtsebene bezeichnet.

Vues Kernbibliothek konzentriert sich nur auf die Ansichtsebene

6. Wie wird mit jquery eine vollständige Seite entwickelt?

a. HTML-Schreibrahmen

b. CSS-Dekoration

c Apropos JavaScript-DOM-Operationen. Wenn Sie JQuery zum Entwickeln eines Zhihu verwenden, müssen Sie in JQuery verschiedene DOM-Operationsmethoden verwenden, um die DOM-Struktur von HTML zu bedienen.

Abstrahieren wir nun eine Webanwendung, dann ist das DOM in HTML tatsächlich eine Ansicht. Eine Webseite bildet durch die Kombination und Verschachtelung von DOM und dann durch die Modifikation von CSS in Basic Ansichtsstrukturen sind „Make-up“, um sie schöner aussehen zu lassen. Wenn es um den interaktiven Teil geht, müssen Sie schließlich JavaScript verwenden, um die interaktive Anfrage des Benutzers zu akzeptieren, über den Ereignismechanismus auf die interaktive Operation des Benutzers zu reagieren und verschiedene Daten in der Ereignisverarbeitungsfunktion zu ändern, z. B. die Änderung eines bestimmten DOM innerHTML- oder innerText-Teil.

7. Warum macht es Vue.js so bequem, webbasierte Front-End-Anwendungen zu entwickeln? a, deklarativ

b, reaktionsfähige Datenbindung

c, komponentenbasierte Entwicklung

d, virtuelles DOM

Weil Vue.js über eine deklarative, reaktionsfähige Datenbindung und komponentenbasierte Entwicklung verfügt und außerdem Virtual DOM verwendet, eine Technologie, die allein vom Namen her schick klingt.

8. Was ist die dynamische Datenbindung, die oft in vue.js erwähnt wird?

Das heißt, vue.js reagiert automatisch auf Datenänderungen und ändert alle miteinander verbundenen Daten und zeigt Inhalte an, basierend auf den vom Benutzer im Code vorab geschriebenen Bindungsbeziehungen. Diese Bindungsbeziehung wird durch das V-Model-Attribut des Eingabe-Tags in der Abbildung deklariert, sodass Sie möglicherweise an anderer Stelle jemanden sehen, der vue.js grob als deklarative Rendering-Vorlagen-Engine bezeichnet.

9. Warum ist Komponentenentwicklung im Frontend erforderlich?

a. Nicht-Komponenten-Entwicklungscode und Arbeitsaufwand sind sehr groß

b Modifikation ist schlimmer als der Tod

Aber jetzt erstellen wir einzelne Seiten Anwendungen, Seiteninteraktionen und Strukturen sind sehr komplex. Es gibt viele Module, die auf einer Seite geschrieben werden müssen, und oft ist die Menge an Code und der Arbeitsaufwand für ein Modul sehr groß ermüdend sein. Wenn sich die Produktanforderungen in Zukunft ändern, befürchte ich außerdem, dass nach dem Verschieben eines der Divs andere Divs folgen und die gesamte Seite oder einige innere DOM-Ereignisse durcheinander geraten Aufgrund des Event-Bubbling-Mechanismus von JavaScript geändert. Nach der Verarbeitung der Funktion treten verschiedene unerklärliche und seltsame Fehler auf.

10. Wie führt man die Komponentenentwicklung im Frontend durch?

a. Leihen Sie sich die modulare Idee aus dem objektorientierten Backend aus (teilen Sie einige große Funktionen in viele Funktionen auf und weisen Sie sie dann verschiedenen Personen zur Entwicklung zu)

b Um die verschiedenen Module in einer Einzelseitenanwendung in separate Komponenten (Komponenten) aufzuteilen, müssen wir zunächst nur verschiedene Komponenten-Tags in die übergeordnete Anwendung schreiben (Pits belegen) und in die Komponenten-Tags schreiben Komponente (genau wie die Übergabe von Parametern an eine Funktion wird dieser Parameter als Attribut der Komponente bezeichnet) und dann die Implementierung verschiedener Komponenten separat schreiben (die Grube ausfüllen)

In der objektorientierten Programmierung können wir Verwenden Sie objektorientiertes Denken, um verschiedene Module in Klassen zu packen oder ein großes Geschäftsmodul in mehr und kleinere Klassen aufzuteilen. Bei der prozessorientierten Programmierung können wir auch einige große Funktionen in viele Funktionen aufteilen und sie dann verschiedenen Personen zur Entwicklung zuweisen.

Können wir in Frontend-Anwendungen auch Module wie die Programmierung kapseln? Dies führt die Idee der Komponentenentwicklung ein.

Vue.js teilt verschiedene Module in einer Einzelseitenanwendung durch Komponenten in separate Komponenten auf. Wir müssen zunächst nur verschiedene Komponenten-Tags in die übergeordnete Anwendung schreiben ( (Fallstricke) und die zu übergebenden Parameter schreiben Fügen Sie die Komponente im Komponenten-Tag ein (genau wie beim Übergeben von Parametern an eine Funktion wird dieser Parameter als Attribut der Komponente bezeichnet) und schreiben Sie dann die Implementierung verschiedener Komponenten separat (füllen Sie die Fallstricke aus). Dann ist die gesamte Anwendung abgeschlossen.

11. Warum gibt es die Virtual DOM-Technologie?

a. Problem

Heutzutage wird die Internetgeschwindigkeit immer schneller. In ihren Häusern gibt es Dutzende oder sogar Hunderte von M-Glasfaserkabeln und Mobiltelefonen Wenn Sie auch mit der Nutzung von 4G begonnen haben, liegt es auf der Hand, dass eine Webseite nur ein paar hundert KB groß ist und der Browser selbst viele Ressourcendateien zwischenspeichert. Warum fühlt es sich also immer noch sehr langsam an, eine Seite zu öffnen, die bereits geöffnet wurde? und wurde durch Dutzende von M-Fasern zwischengespeichert?

b. Gründe

(1) Der Browser selbst weist Leistungsengpässe bei der DOM-Verarbeitung auf

(2) Verwenden Sie JQuery oder native JavaScript-DOM-Operationsfunktionen, um DOM häufig zu manipulieren Bei Operationen muss der Browser ständig neue DOM-Bäume rendern

Dies liegt daran, dass der Browser selbst Leistungsengpässe bei der Verarbeitung von DOM hat, insbesondere bei der herkömmlichen Entwicklung mit JQuery oder nativem JavaScript, wenn die DOM-Operationsfunktion häufige Operationen am DOM ausführt , muss der Browser ständig neue DOM-Bäume rendern, was dazu führt, dass die Seite sehr hängen bleibt.

12. Wie implementiert man Virtual DOM?

a. Berechnen Sie verschiedene Operationen von Dom und rendern Sie das letzte Ergebnis (reduzieren Sie die Anzahl der Dom-Renderings)

Und Virtual DOM ist ein virtuelles DOM Es handelt sich einfach um eine Methode, die im Voraus verschiedene Berechnungen über JavaScript durchführen kann, um die endgültige DOM-Operation zu berechnen und zu optimieren. Da diese DOM-Operation eine Vorverarbeitungsoperation ist und das DOM nicht tatsächlich betreibt, wird sie als virtuelles DOM bezeichnet. Schließlich wird die DOM-Operation tatsächlich übermittelt, nachdem die Berechnung abgeschlossen ist, und die Änderungen der DOM-Operation werden im DOM-Baum widergespiegelt.

13. Wie verwende ich Vue.js für die Entwicklung von Einzelseitenanwendungen?

Tatsächlich können Sie sich einfach das Lernvideo ansehen und mit der Arbeit beginnen, es sollte das Beste sein

a Einführung – lesen Sie den grundlegenden Teil des offiziellen Vue. js-Dokument

Mein Vorschlag ist, zuerst den grundlegenden Teil des offiziellen Dokuments „introduction-vue.js“ zu lesen. Mit Ausnahme des Komponentenabschnitts, der viele obskure Begriffe enthält, verwenden die vorherigen Kapitel lediglich Vue.js als Vorlagen-Engine.

b. Grundlegende Verwendung von ECMAScript6, Webpack, NPM und Vue-Cli. Es ist am besten, ein gewisses Verständnis von Node.js zu haben.

Dann beginnen Sie mit dem Erlernen von ECMAScript6, Webpack, NPM und Vue-Cli Für die grundlegende Verwendung ist es am besten, ein gewisses Verständnis von Node.js zu haben.

c. Sehen Sie sich verschiedene praktische Videos und Artikel im Internet und den Open-Source-Quellcode anderer an

Lassen Sie uns zum Schluss einen groben Blick auf den Komponententeil werfen. Nachdem wir die Konzepte in den Komponenten verstanden hatten, begannen wir, uns verschiedene praktische Videos und Artikel im Internet sowie den Open-Source-Quellcode anderer Leute anzusehen.

14. Was ist ECMAScript?

Die Beziehung zwischen ECMAScript und JavaScript besteht darin, dass Ersteres eine Spezifikation des Letzteren und Letzteres eine Implementierung des Ersteren ist (andere ECMAScript-Dialekte umfassen Jscript und ActionScript). In alltäglichen Situationen sind diese beiden Wörter austauschbar.

ECMAScript6 ist eine neue Generation der JavaScript-Sprache.

15. Was ist Webpack?

a. Front-End-Verpackungstool

Webpack ist ein Front-End-Verpackungs- und Erstellungstool. Wenn Sie zuvor HTML, CSS und JavaScript von Hand geschrieben und CSS über das Link-Tag in Ihre HTML-Datei sowie externe JS-Skripte über das src-Attribut des Script-Tags eingeführt haben, werden Sie sich mit diesem Tool definitiv nicht vertraut fühlen . Es spielt keine Rolle, lassen Sie uns zunächst verstehen, warum wir Webpack verwenden sollten, und dann einfach die Gründe untersuchen.

16. Warum Webpack verwenden?

a. Bequeme Verwaltung verschiedener Materialien

b. Verpackung zur Reduzierung der Anzahl der Browserbesuche

Erstellen Sie wie bereits erwähnt eine einzelne Seite Anwendung Das Programm selbst ist ziemlich komplex und wird dabei auf jeden Fall viele Materialien und andere Bibliotheken von Drittanbietern verwenden. Wie sollten wir diese Dinge verwalten?

Wie bereits erwähnt, ist Webpack ein Front-End-Paketierungstool. Warum sollte der Front-End-Code gepackt werden? Da in Einzelseitenanwendungen viele Materialien verwendet werden und jedes Material über das src-Attribut oder den Link in HTML eingeführt wird, muss der Browser beim Anfordern einer Seite möglicherweise mehr als zehn Anforderungen initiieren, wobei diese häufig angefordert werden Die Ressourcen sind Alle Skriptcodes oder sehr kleinen Bilder sind nur wenige Kilobyte groß und der Download dauert nicht einmal 1 Sekunde. Da HTTP jedoch ein Protokoll der Anwendungsschicht ist, ist die untere Schicht TCP, das Protokoll der Transportschicht Der Handshake- und Wave-Prozess von TCP kann länger dauern als das Herunterladen der Ressource selbst, daher müssen alle diese kleinen Dateien in einer Datei gepackt werden. Auf diese Weise können mehrere Ressourcen in nur einem TCP-Handshake- und Wave-Prozess heruntergeladen werden werden heruntergeladen, weil Sie alle eine HTTP-Anforderung gemeinsam nutzen, sodass auch der Kopf und andere Teile gemeinsam genutzt werden, was einem Skalierungseffekt gleichkommt, wodurch die Webseitenanzeige schneller und die Benutzererfahrung verbessert wird.

17. Was sind NPM und Node.js? Wie ist ihre Beziehung?

a. Node.js ist eine serverseitige JavaScript-Ausführungsumgebung

Node.js ist eine serverseitige JavaScript-Ausführungsumgebung Schreiben Sie ein JavaScript-unabhängiges Programm.

b. Node.js kann unabhängige Programme schreiben (Webpack wird von Node.js geschrieben)

Wie bereits erwähnt, wird Webpack von Node.js geschrieben, also als Front-End-Entwicklung Auch wenn Sie Node.js nicht zum Schreiben unabhängiger Programme verwenden, benötigen Sie dennoch eine Node.js-Laufumgebung. Schließlich werden viele Front-End-Tools damit geschrieben.

c. NPM ist ein node.js-Paketmanager (ähnlich wie Javas Maven (Paketabhängigkeitsverwaltung) und PHP hat einen ähnlichen).

NPM ist ein node.js-Paketmanager. Als wir uns in der traditionellen Entwicklung befanden, wurden die meisten JQuery.js auf Baidu durchsucht und dann von der offiziellen Website heruntergeladen oder CDN-Ressourcen direkt eingeführt. Diese Methode ist zu mühsam. Wenn wir in Zukunft auf andere Pakete stoßen, kann der Code dieses Pakets selbst andere Pakete aufrufen (es wird auch gesagt, dass dieses Paket von mehreren anderen Paketen abhängig ist), dann müssen wir ein Paket in unser Projekt einführen, das zu einem wird sehr schwierig. Da wir nun den NPM-Paketmanager haben, können wir ihn direkt über

npm install xxx包名称

einführen, zum Beispiel

npm install vue

18. Was ist Vue-CLi?

Es ist ein Gerüstwerkzeug für vue.js. Um es ganz klar auszudrücken: Es handelt sich um ein Tool, das Ihnen automatisch dabei hilft, das Projektverzeichnis zu generieren, Webpack und verschiedene abhängige Pakete zu konfigurieren. Es kann über

npm install vue-cli -g

installiert werden. Das folgende -g bedeutet globale Installation, was Sie bedeutet Sie können es direkt über den Befehl vue aufrufen, nachdem Sie die Befehlszeile geöffnet haben.

19. Was sind Vuex und Vue-Route?

Vuex ist ein Statusmanager für Vue. Wird zur zentralen Verwaltung verschiedener Zustände in einer Single-Page-Anwendung verwendet.

Vue-route ist ein Front-End-Router für Vue. Dieser Router ist nicht der Router, den wir für den Zugriff auf das Internet verwenden, sondern eine Sache, die die Zuordnungsbeziehung zwischen Anforderungseinträgen und Seiten verwaltet. Es kann Teile der Seite ersetzen, ohne sie zu aktualisieren, sodass Benutzer das Gefühl haben, zu einer Webseite gewechselt zu haben.

Um diese beiden Dinge klar zu erklären, wird es viel Platz in Anspruch nehmen, deshalb werde ich es hier nur kurz erwähnen. Das Wichtigste ist, zuerst vue.js selbst zu lernen.

Das obige ist der detaillierte Inhalt vonWarum vue.js verwenden? Warum verwenden 46 % der Frontend-Entwickler es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!