Vue.js 2

Inhaltsverzeichnis

Was ist Vue.js 2?

Definition

Vue.js 2 (gemeinhin auch nur als Vue bezeichnet) ist ein Open-Source-Framework in JavaScript und dient der Erstellung von Benutzeroberflächen und Einzelseitenanwendungen.

Vue.js 2 bietet eine inkrementell anpassbare Architektur, die sich auf deklaratives Rendering und Komponenten-Komposition konzentriert. Erweiterte Funktionen, die für komplexe Anwendungen wie Routing, Zustandsverwaltung und Build-Tools erforderlich sind, werden über offiziell verwaltete unterstützende Bibliotheken und Pakete angeboten.

Geschichte

Vue.js 2 wurde von Evan You erstellt, nachdem er in mehreren Projekten mit AngularJS für Google gearbeitet hat. Später fasste er seine Gedanken zusammen, indem er einen Teil aus Angular nahm und etwas Leichtgewichtiges entwickelte. Vue wurde ursprünglich im Februar 2014 veröffentlicht.

Eigenschaften

Templates

Vue.js 2 verwendet eine HTML-basierte Vorlagensyntax, mit der das gerenderte DOM an die Daten der zugrunde liegenden Vue-Instanz gebunden werden kann. Alle Vue-Vorlagen sind gültiges HTML, das von spezifikationskonformen Browsern und HTML-Parsern analysiert werden kann.

Unter der Haube kompiliert Vue.js 2 die Vorlagen in virtuelle DOM-Rendering-Funktionen. In Kombination mit dem Reaktivitätssystem kann Vue die minimale Anzahl von Komponenten berechnen, die erneut gerendert werden sollen und die minimale Anzahl an DOM-Manipulationen anwenden, wenn sich der App-Status ändert.

Vue.js 2-Benutzer können Schablonensyntax verwenden oder Rendering-Funktionen mithilfe von JSX direkt schreiben. Rendering-Funktionen eröffnen Möglichkeiten für leistungsfähige, komponentenbasierte Muster – beispielsweise ist das neue Übergangssystem jetzt vollständig komponentenbasiert und verwendet interne Rendering-Funktionen.

Reaktivität

Vue.js 2 bietet ein Reaktivitätssystem, das einfache JavaScript-Objekte verwendet und das erneute Rendern optimiert. Jede Komponente verfolgt über ihre reaktiven Abhängigkeiten während des Renderns, sodass das System genau weiß, wann es neu gerendert werden muss und welche Komponenten erneut gerendert werden sollen.

Komponenten

Vue-Komponenten erweitern grundlegende HTML-Elemente, um wieder verwendbaren Code zu kapseln. Auf hoher Ebene sind Komponenten benutzerdefinierte Elemente, denen der Compiler von Vue Verhalten anhängt. In Vue ist eine Komponente im Wesentlichen eine Vue-Instanz mit vordefinierten Optionen.

Übergänge

Vue.js 2 bietet verschiedene Möglichkeiten, Übergangseffekte anzuwenden, wenn Elemente eingefügt, aktualisiert oder aus dem DOM entfernt werden. Dies beinhaltet folgende Werkzeuge:

Klassen, die automatisch für CSS-Übergänge und -Animationen angewendet werden
Integration von CSS-Animationsbibliotheken von Drittanbietern wie z. B. Animate.css
Verwendung von JavaScript, um das DOM während Übergangshaken direkt zu bearbeiten
Integration von JavaScript-Bibliotheken für Drittanbieter wie z. B. Velocity.js

Wenn ein in eine Übergangskomponente eingeschlossenes Element eingefügt oder entfernt wird, geschieht Folgendes:

Vue.js 2 prüft automatisch, ob auf das Zielelement CSS-Übergänge oder -Animationen angewendet werden. In diesem Fall werden CSS-Übergangsklassen zu geeigneten Zeitpunkten hinzugefügt und/oder entfernt.
Wenn die Übergangskomponente JavaScript-Hooks bereitgestellt hat, werden diese Hooks zu geeigneten Zeitpunkten aufgerufen.
Wenn keine CSS-Übergänge oder -Animationen erkannt werden und keine JavaScript-Hooks vorhanden sind, werden die DOM-Vorgänge zum Einfügen und/oder Entfernen sofort beim nächsten Frame ausgeführt.

Routing

Ein traditioneller Nachteil von Single-Page-Anwendungen (SPAs) besteht darin, dass Verknüpfungen mit der genauen “Unterseite” innerhalb einer bestimmten Webseite nicht freigegeben werden können. Da SPAs ihren Benutzern nur eine URL-basierte Antwort vom Server zur Verfügung stellen (normalerweise für index.html oder index.vue), ist das Speichern von Lesezeichen oder das Teilen von Links zu einem bestimmten Artikel nicht möglich.

Um dieses Problem zu lösen, stellen Front-End-Router künstliche Hash-basierte URLs bereit, die ursprünglich durch eine Hashbang (#!) page.com/#!/ geteilt wurden. Mit HTML5 unterstützen sie jedoch die meisten modernen Browser das Routing ohne die Verwendung eines Hashbangs.

Vue.js 2 bietet eine Benutzeroberfläche, um basierend auf dem aktuellen URL-Pfad zu ändern, was auf der Seite angezeigt wird – unabhängig davon, wie es geändert wurde (ob per E-Mail-Link, Aktualisierung oder In-Page-Link). Darüber hinaus ermöglicht die Verwendung eines Frond-End-Routers den absichtlichen Übergang des Browserpfads, wenn bestimmte Browserereignisse (d. h. Klicks) auf Schaltflächen oder Links auftreten. Vue selbst enthält kein Frond-End-Hash-Routing.

Das Open-Source-Paket “vue-router” bietet jedoch eine API, um die Browser-URL zu ändern, die Zurück-Schaltfläche (Hash-Verlauf) zu verwenden und das E-Mail-Passwort zurückzusetzen oder E-Mail-Überprüfungslinks mit den in der URL angegebenen Authentifizierungsparametern.

Es unterstützt die Zuordnung verschachtelter Routen zu verschachtelten Komponenten und bietet eine fein abgestufte Übergangskontrolle. Mit Vue stellen Entwickler bereits Anwendungen mit kleinen Bausteinen zusammen, die größere Komponenten bilden. Mit “vue-router”, der zum Mix hinzugefügt wird, müssen Komponenten lediglich den Routen zugeordnet werden, zu denen sie gehören und Parent-/Root-Routen müssen angegeben werden, wo untergeordnete Elemente gerendert werden sollen.

Tipp

Wenn Sie noch Fragen bezüglich eines Online Marketing Themas haben, dann können Sie gerne unseren Glossar besuchen und sich über das Thema informieren, wo Sie noch speziell Fragen haben.

Integration

Es gibt eine Vielzahl von Drittanbietern, die Vue.js 2 nutzen, um die Reichweite über den Kernrahmen zu erweitern:

NativeScript

NativeScript ist ein Open-Source-Framework zur Entwicklung von Apps auf Apple iOS- und Android-Plattformen. Es wurde ursprünglich von Progress konzipiert und entwickelt. NativeScript-Apps werden mithilfe von JavaScript erstellt oder mithilfe einer beliebigen Sprache, die in JavaScript übersetzt wird. Es unterstützt die JavaScript-Frameworks Angular und Vue.

Mit NativeScript erstellte mobile Anwendungen führen zu vollständig nativen Apps, die dieselben APIs verwenden, als wären sie in Xcode oder Android Studio entwickelt worden. Darüber hinaus können Softwareentwickler Bibliotheken von Drittanbietern von CocoaPods, Android Arsenal, Maven und npm.js in ihren mobilen Anwendungen ohne Verwendung von Wrappern neu verwenden.

Weex

Weex ist eine clientseitige Technologie an der Oberfläche, die jedoch den gesamten Weg von der lokalen Entwicklungsumgebung zur Bereitstellung und Verteilung der Cloud verbindet. Entwickler können eine App-Seite zunächst wie eine Webseite schreiben und dann die App-Seite zu einem JavaScript-Element kompilieren, das als Weex JS-Bundle bezeichnet wird. In der Cloud können Entwickler das generierte JS-Bundle bereitstellen. Mit WeexSDK kann es von einer mobilen App angefordert oder vorabgerufen werden.

Quasar

Quasar ist ein MIT-lizenziertes Open-Source-Framework, welches mit Vue betrieben wird. Es hilft Webentwicklern, responsive ++Webseiten oder Apps in vielen Varianten zu erstellen:

SPAs (Single Page App)
SSR (serverseitige gerenderte App + optionale Übernahme von PWA-Clients)
PWAs (Progressive Web App)
Mobile Apps (Android, iOS) über Apache Cordova
Plattformübergreifende Desktop-Apps (mit Electron)

Mit Quasar können Entwickler einmalig Code schreiben und gleichzeitig als Webseite (SPA, PWA, SSR + SPA-Client-Übernahme, SSR + PWA-Client-Übernahme), Mobile App und/oder Electron App mit derselben Codebase bereitstellen. Man kann in Rekordzeit eine App entwerfen, indem hochmoderne CLI sowie schnelle Webkomponenten verwendet werden.

Darüber hinaus wird Vue.js 2 auch für UI-Toolkits verwendet, die ebenfalls eine Erweiterung möglich machen, wie z. B.: