Vue.js

Vue.js (View, englische Aussprache [vjuː]) ist ein clientseitiges JavaScript-Webframework zum Erstellen von Single-Page-Webanwendungen nach dem MVVM-Muster, es kann allerdings auch in Multipage-Webseiten für einzelne Abschnitte verwendet werden. Ab Version 2.0 unterstützt es auch serverseitiges Rendern.

Vue.js
Basisdaten
Maintainer	Evan You
Entwickler	Evan You, Online-Community
Erscheinungsjahr	Februar 2014
Aktuelle Version	Vue 2: 2.7.14 (2022-11-09) Vue 3: 3.3.4 (2023-05-18)
Betriebssystem	Plattformunabhängig
Programmiersprache	JavaScript (bis Version 2.6) TypeScript (ab Version 3.0)
Kategorie	Framework
Lizenz	MIT-Lizenz
deutschsprachig	nein
vuejs.org

Neben der aktuellen Version Vue 3 wurde Vue 2 weiter gepflegt, diese Version wird aber zum 31. Dezember 2023 seinen End-of-life Termin erreichen.

Konzept

Die Entwickler bezeichnen Vue.js als progressiv und inkrementell adaptierbar im Vergleich zu anderen Webframeworks. Dies erlaubt dem nutzenden Entwickler, die Struktur der Anwendung nach eigenen Ansprüchen zu richten. Die Entwickler bezeichnen Vue.js als einfacher zu erlernen als AngularJS, da die API einfach gehalten wurde. Um Vue.js einsetzen zu können, sind lediglich Kenntnisse in JavaScript und HTML notwendig, zur Benutzung und dem vollständigen Erlernen ist die beispielreiche Dokumentation unter vuejs.org ausreichend.

Durch Umsetzung des MVVM-Musters bietet Vue.js die Möglichkeit des Data Bindings, so dass Aus- und Eingaben direkt an die Datenquelle gekoppelt werden. Somit ist das manuelle Ermitteln der Daten (z. B. via jQuery) aus dem HTML-DOM nicht notwendig. Hierbei sind keinerlei zusätzliche Annotationen wie bei Knockout.js notwendig, durch die Deklaration in einem Vue-Element werden ganz normale JavaScript-Variablen als reaktive Elemente eingebunden.

Struktur

Die Vue-Instanz

Jede Anwendung mit Vue.js hat (mindestens) eine zentrale Instanz. Je HTML-Datei sind beliebig viele Instanzen möglich. Eine Instanz wird mit der Eigenschaft el an einen HTML-Knoten gebunden (hier über den CSS-Selektor „body“ definiert).

var vm = new Vue({  el: "body",  data: {  message: "Hallo Welt",  items: [  "dies",  "ist",  "ein",  "Array"  ]  } }); 

Komponenten

Die Funktionalität von Instanzen kann durch Komponenten erweitert werden, welche sich baumartig verschachteln lassen. Komponenten unterscheiden sich von Instanzen dadurch, dass sie nicht an HTML-Knoten angebunden werden, sondern ein eigenes HTML-Template enthalten.

// Definition der Komponente und globale Registrierung derselben Vue.component('my-component', {  template: '<div>Dies ist eine neue Komponente</div>' })  // erzeugen der Vue-Instanz new Vue({  el: '#example' }) 

<!-- HTML-Knoten --> <div id="example"> <my-component></my-component> </div> <!-- Wird im DOM zu --> <div id="example"> <div>Dies ist eine neue Komponente</div> </div> 

Double Curly Syntax

Durch die Verwendung der bei JavaScript-Frameworks beliebten doppelten geschweiften Klammern (double-curly syntax) können JavaScript-Elemente in den HTML-DOM eingefügt werden. Dabei wird das Element in der Datenquelle aus der Vue-Instanz verknüpft. Das Databinding ist in beide Richtungen möglich (“Two way databinding”), wodurch die Veränderung der Daten durch den Benutzer ermöglicht wird. Die Direktive model sorgt für das Databinding mit Input-Elementen.

<div id="demo">  <p>{{ message }}</p>  <input v-model="message"> </div> 

Direktiven

Mit HTML-Attributen ist es möglich, Aktionen auszuführen, wie zum Beispiel mit einer Schleife durch ein Array zu iterieren, HTML-Knoten nur optional in den DOM einzubinden (v-if), HTML-Knoten auszublenden (v-show), Events abzufangen (v-on) oder Attribute an Variablen zu binden (v-bind). Die Direktiven von Vue.js sind an dem Präfix v- erkennbar. Es ist auch möglich, Filter anzuwenden, um die Ausgabe von JavaScript-Elementen zu verändern. Eigene Direktiven und Filter können definiert werden in Form von JavaScript-Funktionen.

<ul>  <li v-for="item in items">  {{ item }} <!-- Ausgabe des Wertes -->  {{ item | lowercase }} <!-- Ausgabe des Wertes in Kleinbuchstaben -->  </li> </ul> 

Lebenszyklus der Komponenten

Alle Instanzen und Komponenten durchlaufen einen Lebenszyklus, dieser besteht aus mehreren Etappen, welche dazu genutzt werden können, eigene Funktionen aufzurufen. Vor allem die Etappe mounted wird sehr häufig verwendet, da diese aufgerufen wird, unmittelbar nachdem die Komponente im DOM eingebunden wurde. Durch die Verwendung der vue-Funktion $next kann Code definiert werden, welcher erst aufgerufen wird, wenn die Komponente auch bereit ist.

new Vue({  mounted: function () {  //Wird aufgerufen, wenn die Komponente sichtbar wird, wie z. B. durch v-if oder vue-router  console.log('Diese Komponente wurde im DOM eingebunden bei '+Date.now());  this.$next(() => console.log('Die Komponente ist jetzt vollständig bereit.'))  },  destroyed: function() {  //Wird aufgerufen, wenn die Komponente aus dem DOM entfernt wird  removeListener(XY);  } }) 

Modularität

Vue.js kann durch Erweiterungen ergänzt werden, diese können Mixins, Direktiven, Filter, Komponenten und Objekte enthalten. Als offizielle Erweiterungen werden vuex, ein an Redux angelehnter Zustandsmanager, und vue-router, ein Komponenten-Router, angeboten. Unter awesome-vue wird eine aktuelle Auflistung an Erweiterungen gepflegt. So gibt es beispielsweise eine Erweiterung zum Durchführen von HTTP-Requests. Diese wurde jedoch als offizielle Bibliothek aus dem Vue.js-Portfolio entkoppelt.

Varianten

Von Vue.js gibt es sowohl eine Entwicklungs- als auch Produktivversion. Die Entwicklungsversion ermöglicht die Ausgabe von Informationen und Warnungen, wenn der Debug-Modus aktiviert ist. Die für den Produktiveinsatz vorgesehene Version unterstützt diesen Modus nicht.

Für die Entwicklungsversion gibt es eine Browsererweiterung für Google Chrome und Mozilla Firefox, um das Debugging der Anwendung zu erleichtern.

Single File Components

Statt für jede Seite eine neue Vue-Instanz zu erstellen, kann auch durch sogenannte „Single File Components“ eine einzige Instanz von Vue.js erstellt und auf diese zugegriffen werden. Dies bietet sich bei größeren Projekten an, wo eine Modularisierung notwendig sein kann. Innerhalb von Single File Components wird blockweise das HTML, CSS und JavaScript eingefügt.

<template>  <p>{{ greeting }} World!</p> </template>  <script>  module.exports = {  data: function () {  return {  greeting: 'Hello'  }  }  } </script>  <style scoped>  p {  font-size: 2em;  text-align: center;  } </style> 

Verwendung in Wikimedia

Vue.js ist die offizielle Wahl der Wikimedia Foundation für die Verwendung als zukünftiges JavaScript-Framework für MediaWiki. Beispielsweise wurde die neue Mediensuche auf Wikimedia Commons mit Vue.js realisiert.

„With excitement we're sharing today that Vue.js is Wikimedia Foundation's official choice for adoption as future JavaScript framework for use with MediaWiki.“ Volker E. (WMF)

Siehe auch

• MVVM
• Angular
• React
• Ember.js
• Backbone.js
• Knockout.js

Weblinks

• Offizielle Webpräsenz (englisch)
• Offizielles Forum (englisch)
• Vue js Examples
• Vue.js devtools – Erweiterung für Google-Chrome

Einzelnachweise

1. egghead.io.
2. "Github:vuejs/vue Releases". Abgerufen am 13. Juni 2023 (englisch). 
3. "Github:vuejs/core Releases". Abgerufen am 13. Juni 2023 (englisch). 
4. Evan You: Vue Guide: Server-Side Rendering. https://github.com/vuejs/vuejs.org, 1. Februar 2017, abgerufen am 17. Februar 2017 (englisch). 
5. Evan You: Frequently Asked Questions: What's the difference between Vue 2 and Vue 3? Abgerufen am 13. Juni 2023 (englisch). 
6. Evan You: Frequently Asked Questions: Is Vue 2 Still Supported? Abgerufen am 13. Juni 2023 (englisch). 
7. Comparison with Other Frameworks – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
8. Introduction: What is Vue.js? auf vuejs.com
9. Jacob Schatz: Why We Chose Vue.js. Gitlab Blog, 20. Oktober 2016, abgerufen am 17. Februar 2017 (englisch). 
10. Data Binding Syntax – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
11. Getting Started - vue.js. In: vuejs.org. Abgerufen am 17. Juli 2016. 
12. List Rendering - vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
13. vue.js. In: vuejs.org. Abgerufen am 17. Juli 2016. 
14. Lebenszyklus
15. Understanding Vue.js Lifecycle Hooks. Abgerufen am 17. Februar 2017 (englisch). 
16. Mixins
17. vuex
18. Redux
19. vue-router
20. awesome-vue
21. vuejs/vue-resource. In: GitHub. Abgerufen am 17. Juli 2016. 
22. Evan You: Retiring vue-resource – The Vue Point. 3. November 2016, abgerufen am 17. Februar 2017. 
23. Installation – vue.js. In: vuejs.org. Abgerufen am 21. Juli 2016. 
24. vue.js. In: vuejs.org. Abgerufen am 21. Juli 2016. 
25. Vue.js devtools. In: chrome.google.com. Abgerufen am 21. Juli 2016. 
26. Eric Gardner und Anne Tomasevich: 2020: The Year in Vue. In: techblog.wikimedia.org. Wikimedia Foundation, 22. Januar 2021, abgerufen am 7. Dezember 2021 (englisch). 
27. Vue.js. In: mediawiki.org. Wikimedia Foundation, abgerufen am 7. Dezember 2021 (englisch). 
28. Extension:MediaSearch. In: mediawiki.org. Abgerufen am 7. Dezember 2021 (englisch). 
29. https://lists.wikimedia.org/hyperkitty/list/[e-mail]/thread/SOZREBYR36PUNFZXMIUBVAIOQI4N7PDU/