Detaillierte Erklärung der drei wichtigsten Frontend-Technologien React, Angular und Vue

1. Reagieren

React (auch bekannt als React.js oder ReactJS) ist eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Es wird von Facebook und einer Community aus einzelnen Entwicklern und Unternehmen gepflegt.

React kann als Grundlage für die Entwicklung von Single-Page- oder mobilen Anwendungen verwendet werden. Da sich React jedoch nur mit der Darstellung von Daten im DOM befasst, erfordert die Erstellung von React-Anwendungen normalerweise die Verwendung zusätzlicher Bibliotheken für die Statusverwaltung und das Routing. Redux und React Router sind Beispiele für solche Bibliotheken.

Grundlegende Verwendung

Unten sehen Sie ein einfaches Beispiel für React mit JSX und JavaScript in HTML.

Die Greeter-Funktion ist eine React-Komponente, die eine Prop-Begrüßung akzeptiert. Die Variable App ist eine Instanz der Greeter-Komponente, wobei die Begrüßungseigenschaft auf „Hallo Welt!“ eingestellt ist. Dann rendert die Methode ReactDOM.render unsere Greeter-Komponente im DOM-Element (ID ist myReactApp).

Bei der Anzeige in einem Webbrowser lautet das Ergebnis:

Bemerkenswerte Funktionen

Komponentenbildung

Der React-Code besteht aus Entitäten, die Komponenten genannt werden. Komponenten können mithilfe der React DOM-Bibliothek in ein bestimmtes Element im DOM gerendert werden. Beim Rendern einer Komponente kann diese Werte übergeben, die als „Props“ bezeichnet werden.

Die beiden wichtigsten Möglichkeiten zum Deklarieren von Komponenten in React sind funktionale Komponenten und klassenbasierte Komponenten.

Funktionale Komponenten

Funktionale Komponenten werden mit einer Funktion deklariert, die etwas JSX zurückgibt.

Klassenkomponente

Klassenbasierte Komponenten werden mithilfe von ES6-Klassen deklariert. Sie werden auch als „zustandsbehaftete“ Komponenten bezeichnet, da ihr Zustand in der gesamten Komponente gespeichert und über Props an untergeordnete Komponenten weitergegeben werden kann.

Virtueller DOM

Ein weiteres bemerkenswertes Merkmal von React ist die Verwendung eines virtuellen Dokumentobjektmodells bzw. virtuellen DOM. React erstellt einen Datenstruktur-Cache im Arbeitsspeicher, berechnet die Unterschiede in den Änderungen und rendert nur die Unterkomponenten, die sich tatsächlich geändert haben, wodurch das vom Browser angezeigte DOM effizient aktualisiert wird.

Lebenszyklusmethoden

Lebenszyklusmethoden beziehen sich auf Hook-Verarbeitungsfunktionen, die die Ausführung von Code an festgelegten Punkten während des Lebenszyklus einer Komponente ermöglichen.

• shouldComponentUpdate ermöglicht es Entwicklern, ein unnötiges erneutes Rendern von Komponenten zu verhindern, indem es „false“ zurückgibt, wenn ein Rendern nicht erforderlich ist.
• componentDidMount wird aufgerufen, nachdem die Komponente „gemountet“ wurde (die Komponente wurde in der Benutzeroberfläche erstellt, normalerweise durch die Zuordnung zu einem DOM-Knoten). Dies wird häufig verwendet, um das Laden von Daten aus einer Remote-Datenquelle über eine API auszulösen.
• componentWillUnmount wird aufgerufen, unmittelbar bevor eine Komponente abgebaut oder „ausgehängt“ wird. Dies wird normalerweise verwendet, um Ressourcenabhängigkeiten einer Komponente zu bereinigen, die nicht einfach entfernt werden, wenn die Komponente ausgehängt wird (z. B. Entfernen aller mit der Komponente verknüpften setInterval()-Instanzen oder eventListeners, die aufgrund der Existenz der Komponente für das Dokument festgelegt wurden).
• Render ist die wichtigste Lebenszyklusmethode und die einzige Methode, die in jeder Komponente vorhanden sein muss. Es wird normalerweise jedes Mal aufgerufen, wenn der Status der Komponente aktualisiert wird.

JSX

JSX oder JavaScript XML ist eine Erweiterung der JavaScript-Sprachsyntax. JSX ähnelt in seiner Erscheinung HTML und bietet eine Möglichkeit, die Komponentendarstellung mit einer Entwicklern vertrauten Syntax zu strukturieren. React-Komponenten werden häufig mit JSX geschrieben, obwohl dies nicht erforderlich ist (Komponenten können auch in reinem JavaScript geschrieben werden). JSX ähnelt einer anderen von Facebook für PHP erstellten Erweiterungssyntax namens XHP.

Ein Beispiel für JSX-Code:

Verschachtelte Elemente

Mehrere Elemente auf derselben Ebene müssen in ein Containerelement zusammengefasst werden, wie z. B. das <div>-Element in der Abbildung oben.

Eigentum

JSX bietet eine Reihe von Elementattributen, die den von HTML bereitgestellten Attributen entsprechen sollen. Diese benutzerdefinierten Eigenschaften können auch an die Komponente übergeben werden, und alle Eigenschaften werden von der Komponente als Requisiten empfangen.

JavaScript-Ausdrücke

JavaScript-Ausdrücke (aber keine Anweisungen) können in JSX mit geschweiften Klammern {} verwendet werden.

Das Anzeigeergebnis des obigen Codes ist:

Bedingte Anweisungen

If-else-Anweisungen können in JSX nicht verwendet werden, stattdessen können jedoch bedingte Ausdrücke verwendet werden. Das folgende Beispiel rendert { i === 1 ? 'true' : 'false' } als Zeichenfolge 'true', wenn i 1 ist.

Das Ergebnis wird sein:

Funktionen und JSX können in bedingten Ausdrücken verwendet werden:

Das Ergebnis wird sein:

In JSX geschriebener Code muss von Tools wie Babel konvertiert werden, bevor er von Webbrowsern verstanden werden kann. Diese Verarbeitung wird im Allgemeinen während des Softwareerstellungsprozesses durchgeführt, und dann wird die erstellte Anwendung bereitgestellt.

Architektur jenseits von HTML

Die grundlegende Architektur von React dient nicht nur der Darstellung von HTML im Browser. Facebook verfügt beispielsweise über dynamische Diagramme, die in einem <canvas>-Tag gerendert werden, während Netflix und PayPal Universal Loading verwenden und sowohl auf dem Server als auch auf dem Client dasselbe HTML rendern.

Reagieren Sie mit Hooks

Hooks sind Funktionen, die es Entwicklern ermöglichen, sich in React-Status- und Lebenszyklusfunktionen von Funktionskomponenten einzuklinken. Sie machen den Code lesbarer und leichter verständlich. Hooks funktionieren nicht innerhalb von Klassenkomponenten und ihr ultimatives Ziel besteht darin, die Existenz von Klassenkomponenten in React zu eliminieren.

React bietet einige integrierte Hooks, wie etwa useState, useContext, useReducer und useEffect. Sie sind alle in der Hooks API-Referenz dokumentiert. Am häufigsten werden useState und useEffect verwendet, die jeweils den Status steuern und Statusänderungen in React-Komponenten erkennen.

Regeln für Hooks

Für Hooks gelten auch einige Regeln, die vor der Verwendung befolgt werden müssen:

• Hooks können nur auf der obersten Ebene aufgerufen werden (nicht in Schleifen oder if-Anweisungen).
• Hooks können nur in React-Funktionskomponenten aufgerufen werden, nicht in normalen Funktionen oder Klassenkomponenten. Benutzerdefinierte Haken

Durch das Erstellen eigener Hooks, auch als benutzerdefinierte Hooks bezeichnet, können Sie Komponentenlogik in wiederverwendbare Funktionen extrahieren. Ein benutzerdefinierter Hook ist eine JavaScript-Funktion, deren Name mit „use“ beginnt und die andere Hooks aufrufen kann. Für sie gelten die gleichen Regeln wie für Hooks.

Allgemeine Begriffe

React versucht nicht, eine vollständige „Anwendungsbibliothek“ bereitzustellen. Es ist speziell für die Erstellung von Benutzeroberflächen konzipiert und enthält daher nicht viele der Tools, die manche Entwickler für die Erstellung von Anwendungen zu benötigen meinen. Dadurch können Entwickler für Aufgaben wie den Netzwerkzugriff oder die lokale Datenspeicherung jede beliebige Bibliothek auswählen. Diese Situation führt auch dazu, dass die Standards für die React-Technologie beim Erstellen von Webanwendungen nicht vereinheitlicht werden können.

Verwendung der Flux-Architektur

Um das Konzept des unidirektionalen Datenflusses von React (im Gegensatz zum bidirektionalen Datenfluss von AngularJS/Angular) zu unterstützen, ist die Flux-Architektur eine repräsentative Alternative zur beliebten Model-View-Controller-Architektur (MVC). Die Besonderheit von Flux besteht darin, dass Datenaktionen über einen zentralen Dispatcher an ein Speicherlager gesendet und Änderungen an den Speicherlagerdaten zurück an die Ansicht übermittelt werden. Bei Verwendung mit React erfolgt diese Übertragung über Komponenteneigenschaften.

Flux kann als eine Variation des Observer-Musters betrachtet werden.

React-Komponenten in der Flux-Architektur sollten an sie übergebene Props nicht direkt ändern, sondern Rückruffunktionen übergeben, die vom Dispatcher gesendete Datenaktionen erstellen können, um den Store zu ändern. Eine Datenaktion ist ein Objekt, dessen Aufgabe es ist, etwas zu beschreiben, das passiert ist: Beispielsweise beschreibt eine Datenaktion, dass ein Benutzer einem anderen Benutzer „folgt“. Es kann Daten enthalten wie:

Benutzer-ID,

Zielbenutzer-ID,

Und der Aufzählungstyp USER_FOLLOWED_ANOTHER_USER.

Ein Repository ist ein Datenmodell, das sich basierend auf den vom Scheduler empfangenen Datenaktionen ändern kann.

Dieses Muster wird manchmal als „Attribute fließen nach unten, Datenaktionen fließen nach oben“ ausgedrückt. Seit der Einführung von Flux wurden viele Implementierungen von Flux erstellt, von denen Redux die bekannteste ist. Es verfügt über ein einziges Speicher-Repository, das oft als einzige zuverlässige Datenquelle bezeichnet wird.

Geschichte

React wurde von Jordan Walke entwickelt, einem Softwareentwickler bei Facebook, der einen frühen Prototyp von React namens „FaxJS“ veröffentlichte, der von der HTML-Komponentenbibliothek XHP von PHP inspiriert war. Es wurde erstmals 2011 im News Feed von Facebook und später 2012 auf Instagram eingesetzt. Es wurde im Mai 2013 auf der JSConf-Konferenz in den USA als Open Source vorgestellt.

React Native wurde im Februar 2015 auf der React Conf von Facebook angekündigt und im März 2015 als Open Source freigegeben, wodurch native Android-, iOS- und UWP-Entwicklung ermöglicht wurde.

Am 18. April 2017 kündigte Facebook React Fiber an, einen neuen Kernalgorithmus für die React-Bibliothek zum Erstellen von Benutzeroberflächen. React Fiber wird die Grundlage für alle zukünftigen Verbesserungen und Funktionsentwicklungen der React-Bibliothek sein.

Am 26. September 2017 wurde React 16.0 offiziell veröffentlicht.

Am 16. Februar 2019 wurde React 16.8 offiziell veröffentlicht, wodurch React Hooks eingeführt wurden.

Allgemeine Befehle

Erstellen Sie ein Projekt:

npx Erstellen-Reagieren-App Meine-App

Betrieb der Entwicklungsumgebung:

npm starten

Verpackung in der Produktionsumgebung:

npm-Ausführung erstellen

【Offizielle Website】

http://reactjs.org/

【Neueste Version】

16.13.1 am 19. März 2020

【Genehmigung】

MIT-Lizenz

Eckig

Angular (oft als „Angular 2+“ oder „Angular v2 und höher“ bezeichnet) ist ein Open-Source-Framework für Webanwendungen auf TypeScript-Basis, das vom Angular-Team bei Google und einer Community aus Einzelpersonen und Unternehmen geleitet wird. Angular wurde von Grund auf neu geschrieben, und zwar vom selben Team, das auch AngularJS entwickelt hat.

Unterschied zwischen Angular und AngularJS

• Angular kennt kein Konzept von „Scope“ oder Controllern, sondern verwendet als primäres Architekturmerkmal eine Hierarchie von Komponenten.
• Angular hat eine andere Ausdruckssyntax, wobei der Schwerpunkt auf „[]“ für die Eigenschaftsbindung und „()“ für die Ereignisbindung liegt.
• Modularität - viele Kernfunktionen wurden in Module verlagert
• Angular empfiehlt die Verwendung der TypeScript-Sprache von Microsoft, die die folgenden Funktionen einführt.

(1) Statische Typisierung, einschließlich Generika

(2) Hinweise

• TypeScript ist eine Obermenge von ECMAScript 6 (ES6) und abwärtskompatibel mit ECMAScript 5 (d. h. JavaScript).
• Dynamische Belastung
• Asynchrone Vorlagenkompilierung
• Von RxJS bereitgestellte Iterations-Rückrufe. RxJS begrenzt die Statussichtbarkeit und das Debuggen, aber diese Probleme können mit reaktiven Add-Ons wie ngReact oder ngrx gelöst werden.
• Unterstützt Angular Universal, wodurch Sie Angular-Anwendungen auf dem Server ausführen können.

Geschichte

Name

Ursprünglich wurde die Neufassung von AngularJS „Angular 2“ genannt, was jedoch bei den Entwicklern zu Verwirrung führte. Zur Klarstellung gab das Team bekannt, dass für jedes Framework eine andere Terminologie verwendet werde, wobei sich „AngularJS“ auf die Versionen 1.X und „Angular“ auf die Versionen 2 und höher beziehe.

Version 2

Angular 2.0 wurde auf der ng-Europe-Konferenz am 22. und 23. Oktober 2014 angekündigt. Die drastischen Änderungen in Version 2.0 sorgten unter den Entwicklern für erhebliche Kontroversen.

Am 30. April 2015 gaben die Angular-Entwickler bekannt, dass Angular 2 von der Alpha-Phase in die Entwicklervorschau übergeht. Im Dezember 2015 ging Angular 2 in die Beta-Phase über. Der erste Release Candidate wurde im Mai 2016 veröffentlicht und die endgültige Version am 14. September 2016.

Version 4

Angular 4 wurde am 13. Dezember 2016 veröffentlicht. Version 3 wurde übersprungen, um Verwirrungen durch die Fehlausrichtung der Router-Paketversion zu vermeiden. Die zu diesem Zeitpunkt veröffentlichte Version war v3.3.0. Die endgültige Version wurde am 23. März 2017 veröffentlicht. Angular 4 ist abwärtskompatibel mit Angular 2.

Bei der Version 4.3 von Angular handelt es sich um eine Nebenversion, die ein Drop-In-Ersatz für die Version 4.xx ist.

Version 4.3 führt HttpClient ein, eine kleinere, einfacher zu verwendende und leistungsfähigere HTTP-Anforderungsbibliothek. Neue Router-Lebenszyklusereignisse für Keeper und Resolver. Vier neue Events. GuardsCheckStart, GuardsCheckEnd, ResolveStart und ResolveEnd ergänzen den vorhandenen Satz von Lebenszyklusereignissen wie NavigationStart. Animationen bedingt deaktivieren. Version 5

Angular 5 wurde am 1. November 2017 veröffentlicht. Zu den wichtigsten Verbesserungen von Angular 5 gehören die Unterstützung für progressive Webanwendungen, Build-Optimierer und Verbesserungen im Zusammenhang mit Material Design.

Version 6

Angular 6 wurde am 4. Mai 2018 veröffentlicht. In dieser Version liegt der Schwerpunkt nicht auf dem zugrunde liegenden Framework, sondern mehr auf der Toolchain und darauf, zukünftige Updates und Upgrades von Angular einfacher zu gestalten, wie z. B.: ngupdate, ng add, Angular-Elemente, Angular Material+CDK-Komponenten, Angular Material-Starterkomponenten, CLI-Arbeitsbereiche, Bibliotheksunterstützung, Tree-Shaking-Anbieter, Leistungsverbesserungen bei Animationen und RxJS v6.

Version 7

Angular 7 wurde am 18. Oktober 2018 veröffentlicht. Die Updates umfassen Anwendungsleistung, Angular Material & CDK, virtuelles Scrollen, Zugänglichkeitsverbesserungen für Selects, Unterstützung für Inhaltsprojektion mithilfe von Webstandards für benutzerdefinierte Elemente und Abhängigkeitsupdates für Typescript 3.1, RxJS 6.3 und Node 10 (Node 8 wird weiterhin unterstützt).

Version 8

Angular 8 wurde am 28. Mai 2019 veröffentlicht. Bietet differenzielles Laden des gesamten Anwendungscodes, dynamische Importe für Lazy Routing, Web Worker, TypeScript 3.4-Unterstützung und Angular Ivy ist als Vorschau verfügbar. Eckig

Die Ivy-Vorschau beinhaltet:

• Der generierte Code ist zur Laufzeit einfacher zu lesen und zu debuggen.
• Schnellere Wiederherstellungszeiten
• Reduzierte Nutzlast
• Verbesserte Überprüfung des Vorlagentyps
• Abwärtskompatibilität

Version 9

Angular 9 wurde am 6. Februar 2020 veröffentlicht. Version 9 verwendet standardmäßig den Ivy-Compiler. Angular ist mit TypeScript 3.6 und 3.7 kompatibel. Neben Hunderten von Fehlerbehebungen bieten der Ivy-Compiler und die Ivy-Laufzeitumgebung viele Vorteile:

• Kleineres Softwarepaket
• Schnelleres Testen
• Besseres Debuggen
• Verbesserte CSS-Klassen- und Stilbindung
• Verbesserte Typprüfung
• Verbesserte Build-Fehler
• Verbesserte Build-Zeit, AOT standardmäßig aktiviert
• Verbessern Sie die Internationalisierungsfähigkeiten

Komponentenbildung

Ein Komponentenbeispiel

HTML-Teil

Typescript-Teil

Routenplanung

Datenmanagement

Definieren von Serviceklassen

Aufrufende Serviceklasse

Allgemeine Befehle

Installieren Sie die Angular CLI global vom Terminal aus:

npm install -g @angular/cli

Erstellen Sie mit dem Befehl ng new einen neuen Angular CLI-Arbeitsbereich:

ng neuer mein-Projektname

Betrieb der Entwicklungsumgebung:

ng dienen

Verpackung in der Produktionsumgebung:

ng build --prod

【Offizielle Website】

https://angular.io/

【Neueste Version】

9.1.2 am 15. April 2020

【Genehmigung】

MIT-Lizenz

3. Ausblick

Vue.js (oft einfach Vue genannt; ausgesprochen /vjuː/, wie „view“) ist ein Open-Source-Model-View-Viewmodel-JavaScript-Framework zum Erstellen von Benutzeroberflächen und Single-Page-Anwendungen. Es wurde von Evan You erstellt und wird von ihm und Kernmitgliedern verschiedener Unternehmen, darunter Netlify und Netguru, gepflegt.

Überblick

Das Merkmal von Vue.js besteht darin, dass es eine progressive Architektur verwendet und sich auf deklaratives Rendering und Komponentensynthese konzentriert. Erweiterte Funktionen, die für komplexe Anwendungen erforderlich sind, wie Routing, Statusverwaltung und Build-Tools, werden durch offiziell gepflegte Support-Bibliotheken und -Pakete bereitgestellt, wobei Nuxt.js eine der beliebtesten Lösungen ist.

Vue.js ermöglicht Ihnen, HTML mithilfe von HTML-Attributen, sogenannten Direktiven, zu erweitern.

Geschichte

Vue wurde von Evan You erstellt. Während seiner Tätigkeit bei Google war er an der Entwicklung mehrerer Projekte mit AngularJS-Technologie beteiligt und entwickelte später Vue. Später fasste er seinen Gedankengang zusammen. „Ich dachte, was wäre, wenn ich die wirklich tollen Teile von AngularJS nehmen und etwas Leichtgewichtiges bauen könnte?“ Das erste Quellcode-Commit für das Projekt erfolgte im Juli 2013 und Vue wurde erstmals im Februar 2014 veröffentlicht.

Komponentenbildung

Vue-Komponenten erweitern grundlegende HTML-Elemente, um wiederverwendbaren Code zu kapseln. Aus einer übergeordneten Perspektive sind Komponenten benutzerdefinierte Elemente, denen der Vue-Compiler Verhalten zuordnet. In Vue ist eine Komponente im Wesentlichen eine Vue-Instanz mit voreingestellten Optionen. Der folgende Codeausschnitt enthält ein Beispiel einer Vue-Komponente. Diese Komponente zeigt eine Schaltfläche an und druckt aus, wie oft auf die Schaltfläche geklickt wurde.

Vorlage

Vue verwendet eine HTML-basierte Vorlagensyntax, die es ermöglicht, das gerenderte DOM an die zugrunde liegenden Daten der Vue-Instanz zu binden. Alle Vue-Vorlagen sind gültiges HTML und können von kompatiblen Browsern und HTML-Parsern analysiert werden. Vue kompiliert Vorlagen in virtuelle DOM-Rendering-Funktionen. Das virtuelle Document Object Model (oder „DOM“) ermöglicht es Vue, Komponenten im Speicher zu rendern, bevor der Browser aktualisiert wird. In Kombination mit dem reaktiven System kann Vue die Mindestanzahl von Komponenten berechnen, die erneut gerendert werden müssen, und bei einer Änderung des App-Status die Mindestanzahl von DOM-Operationen initiieren.

Vue-Benutzer können die Vorlagensyntax verwenden oder Renderfunktionen direkt mit JSX schreiben, wodurch Anwendungen aus Softwarekomponenten erstellt werden können.

Reaktive Systeme

Vue verfügt über ein reaktives System, das reine JavaScript-Objekte und optimiertes erneutes Rendering verwendet. Jede Komponente verfolgt während des Renderings ihre reaktiven Abhängigkeiten, sodass das System genau weiß, wann es erneut gerendert werden muss und welche Komponenten erneut gerendert werden müssen.

Transformationseffekte

Vue bietet verschiedene Methoden zum Bereitstellen von Übergangseffekten beim Einfügen, Aktualisieren oder Entfernen von Elementen aus dem DOM. Hierzu zählen unter anderem folgende Werkzeuge:

• Klassen, die automatisch CSS-Transformationen und Animationen anwenden
• Integrieren Sie CSS-Animationsbibliotheken von Drittanbietern wie Animate.css usw.
• Verwenden Sie während Transformations-Hooks JavaScript, um das DOM direkt zu manipulieren.
• Integrieren Sie JavaScript-Animationsbibliotheken von Drittanbietern wie Velocity.js.

Wenn Elemente in einer Transform-Komponente eingefügt oder entfernt werden, geschieht Folgendes:

• Vue erkennt automatisch, ob auf das Zielelement CSS-Transformationen oder Animationen angewendet wurden. Wenn dies der Fall ist, werden die CSS-Transformationsklassen zum entsprechenden Zeitpunkt hinzugefügt/entfernt.
• Wenn die Transform-Komponente JavaScript-Hooks bereitstellt, werden diese Hooks zum entsprechenden Zeitpunkt aufgerufen.
• Wenn keine CSS-Transformationen/Animationen erkannt werden und keine JavaScript-Hooks bereitgestellt werden, werden die DOM-Operationen zum Einfügen und/oder Entfernen sofort im nächsten Frame ausgeführt.

Routenplanung

Einer der traditionellen Nachteile von Single-Page-Anwendungen (SPAs) besteht darin, dass es nicht möglich ist, Links zu genauen „Unterseiten“ innerhalb einer bestimmten Webseite freizugeben. Da SPAs dem Benutzer nur eine einzige URL-basierte Serverantwort bereitstellen (normalerweise index.html oder index.vue), ist es häufig schwierig oder sogar unmöglich, bestimmte Bildschirme mit Lesezeichen zu versehen oder Links zu bestimmten Abschnitten freizugeben. Um dieses Problem zu lösen, verwenden viele clientseitige Router „Hashbang“ (#!), um dynamische URLs abzugrenzen, wie beispielsweise http://page.com/#!/. In HTML5 unterstützen die meisten modernen Browser jedoch das Routing ohne Hashbang.

Vue bietet eine Schnittstelle zum Ändern des auf einer Seite angezeigten Inhalts basierend auf dem aktuellen URL-Pfad. Dies kann auf verschiedene Weise erfolgen (über einen E-Mail-Link, eine Aktualisierung oder einen Link auf der Seite). Darüber hinaus können Sie mithilfe eines Front-End-Routers Browserpfade gezielt ändern, wenn bestimmte Browserereignisse (z. B. Klicks) auf Schaltflächen oder Links auftreten. Vue selbst verfügt nicht über Front-End-Routing. Das Open-Source-Paket „vue-router“ stellt jedoch eine API zum Aktualisieren der URL der Anwendung bereit, unterstützt eine Zurück-Schaltfläche (Navigationsverlauf) und unterstützt Authentifizierungs-URL-Parameter zum Zurücksetzen von E-Mail-Passwörtern oder für Links zur E-Mail-Bestätigung. Es unterstützt die Zuordnung verschachtelter Routen zu verschachtelten Komponenten und bietet eine feinkörnige Übergangssteuerung. Wenn Vue-Router hinzugefügt wurde, müssen Komponenten nur den Routen zugeordnet werden, zu denen sie gehören, und die übergeordnete/Stammroute muss angeben, wo die untergeordneten Routen gerendert werden sollen.

Der obige Code:

• Legen Sie einen Frontend-Pfad unter http://websitename.com/user/<id> fest.
• Dies wird in der Benutzerkomponente gerendert, die in (const User...) definiert ist.
• Erlauben Sie der Benutzerkomponente, mit dem Parameterschlüssel des $route-Objekts eine benutzerspezifische ID einzugeben: $route.params.id.
• Diese Vorlage (die sich basierend auf den an den Router übergebenen Parametern ändert) wird im DOM innerhalb der div#app <router-view></router-view> gerendert.
• Das endgültig generierte HTML lautet: http://websitename.com/user/1:

Ökosystem

Die Tools und Bibliotheken, die mit der Kernbibliothek geliefert werden, werden vom Kernteam und den Mitwirkenden entwickelt.

Offizielle Tools

• Devtools – Browser-Devtools-Erweiterung zum Debuggen von Vue.js-Anwendungen.
• Vue CLI – Das Standardtool für die schnelle Entwicklung von Vue.js
• Vue Loader – Ein Webpack-Loader, der das Schreiben von Vue-Komponenten im Format von Single File Components (SFCs) ermöglicht.

Offizielle Bibliothek

• Vue Router – Der offizielle Router für Vue.js
• Vuex – Zentralisierte Statusverwaltung für Vue.js basierend auf dem Flux-Muster.
• Vue Server Renderer – Serverseitiges Rendering für Vue.js.

Allgemeine Befehle

Installationstools

npm install -g @vue/cli

Erstellen Sie ein Projekt:

vue erstelle mein-projekt

Betrieb der Entwicklungsumgebung:

npm ausführen dienen

Verpackung in der Produktionsumgebung:

npm-Ausführung erstellen

【Offizielle Website】

https://vuejs.org/

【Neueste Version】

2.6.1 am 13. Dezember 2019

【Genehmigung】

MIT-Lizenz

IV. Zusammenfassung

Dieser Artikel bietet eine relativ detaillierte Untersuchung der aktuellen Top-Frontend-Technologien. Eine wichtige Richtung der Frontend-Technologie ist die Single-Page-Anwendung (SPA). Bei der Auswahl der Frontend-Technologie für dieses Geschäft müssen wir die folgenden Aspekte berücksichtigen:

1. Aktuelle Kenntnisse der Mitglieder. Dies ist ein sehr realistisches Problem. Die meisten Programmierer werden Technologien wählen, mit denen sie besser vertraut sind. Hier gilt es abzuwägen: Ist die Ihnen aktuell bekannte Technik wirklich die beste Option?

2. Verfügbare Lernzeit. Wenn Sie feststellen, dass das Erlernen der Technologie, die Sie verwenden möchten, einige Zeit erfordert, steht dieser Zeitaufwand dann im Konflikt mit dem Entwicklungsfortschritt?

3. Entscheidend ist, ob die Komplexität des Projekts auf ein Minimum beschränkt werden kann. Der Grund, warum fortschrittliche Technologie fortschrittlich ist, besteht darin, dass Entwickler ihre Zeit und Energie auf die eigentliche Geschäftsentwicklung konzentrieren können. Wenn die zu verwendende Technologie viele Konfigurationen erfordert, die nichts mit dem Geschäft zu tun haben, müssen Sie sich fragen: Gibt es einen besseren Weg?

Oben finden Sie eine ausführliche Erläuterung der drei wichtigsten Front-End-Technologien React, Angular und Vue. Weitere Informationen zu den drei wichtigsten Front-End-Technologien React, Angular und Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!