Vue.js

Vue.js (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.^[3]

Die Entwickler bezeichnen Vue.js als progressiv und inkrementell adaptierbar sowie less opinionated 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.^[4] 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.^[5]

Durch Umsetzung des MVVM-Musters bietet Vue.js die Möglichkeit des Databindings, sodass 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.

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

varvm=newVue({
el:"body",
data:{
message:"Hallo Welt",
items:["dies","ist","ein","Array"]
}
});

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
newVue({
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>

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.^[6] 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.^[7] Die Direktive model sorgt für das Databinding mit Input-Elementen.

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

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.^[8] Es ist auch möglich, Filter anzuwenden, um die Ausgabe von JavaScript-Elementen zu verändern.^[9] 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>

Alle Instanzen und Komponenten durchlaufen einen Lebenszyklus,^[10] dieser besteht aus mehreren Etappen, welche dazu genutzt werden können, eigene Funktionen aufzurufen. Vor allem die Etappe mounted wird sehr häufig verwendet^[11] , 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.

newVue({
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);
}
})

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

Von Vue.js gibt es sowohl eine Entwicklungs- als auch Produktivversion.^[19] 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.^[20]

Für die Entwicklungsversion gibt es eine Erweiterung für Google-Chrome, um das Debugging der Anwendung zu erleichtern.^[21]

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>

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

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

1. ↑ Release 3.5.13. 15. November 2024 (abgerufen am 27. November 2024).
2. ↑ registry.npmjs.com. In: npmjs. (abgerufen am 3. März 2023).
3. ↑ Evan You: Vue Guide: Server-Side Rendering. https://github.com/vuejs/vuejs.org, 1. Februar 2017, abgerufen am 17. Februar 2017 (englisch). 
4. ↑ Comparison with Other Frameworks – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
5. ↑ Jacob Schatz: Why We Chose Vue.js. Gitlab Blog, 20. Oktober 2016, abgerufen am 17. Februar 2017 (englisch). 
6. ↑ Data Binding Syntax – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
7. ↑ Getting Started - vue.js. In: vuejs.org. Abgerufen am 17. Juli 2016. 
8. ↑ List Rendering - vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
9. ↑ vue.js. In: vuejs.org. Abgerufen am 17. Juli 2016. 
10. ↑ Lebenszyklus
11. ↑ Understanding Vue.js Lifecycle Hooks. Abgerufen am 17. Februar 2017 (englisch). 
12. ↑ Mixins
13. ↑ vuex
14. ↑ Redux
15. ↑ vue-router
16. ↑ awesome-vue
17. ↑ vuejs/vue-resource. In: GitHub. Abgerufen am 17. Juli 2016. 
18. ↑ Evan You: Retiring vue-resource – The Vue Point. 3. November 2016, abgerufen am 17. Februar 2017. 
19. ↑ Installation – vue.js. In: vuejs.org. Abgerufen am 21. Juli 2016. 
20. ↑ vue.js. In: vuejs.org. Abgerufen am 21. Juli 2016. 
21. ↑ Vue.js devtools. In: chrome.google.com. Abgerufen am 21. Juli 2016. 

• Freies Webframework
• JavaScript-Bibliothek