Vue.js 2

Was ist Vue.js 2?

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:

  1. 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.
  2. Wenn die √úbergangskomponente JavaScript-Hooks bereitgestellt hat, werden diese Hooks zu geeigneten Zeitpunkten aufgerufen.
  3. 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.

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.:

  • Buefy
  • Kendo UI
  • Vuetify
  • Element
  • Vue Material
  • Bootstrap-Vue
  • Vuecidity
  • jQWidgets-Vue

Zusammenfassung der Eckdaten

Evan You
11. Dezember 2018 (Version 2.5.21)
github.com/vuejs/vue
JavaScript
Cross-Plattform
30.67 KB Produktion, 279 KB Entwicklung
JavaScript Framework
MIT Lizenz
https://vuejs.org 

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.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte