Vue.js

Vue.js
Basisdaten
Hauptentwickler	Evan You
Entwickler	Evan You, Online-Community
Erscheinungsjahr	Februar 2014[1]
Aktuelle Version	3.5.13[2] (15. November 2024)
Aktuelle Vorabversion	2.7.0-alpha.3[3] (1. Juni 2022)
Betriebssystem	Plattformunabhängig
Programmier­sprache	JavaScript (bis Version 2.6) TypeScript (ab Version 3.0)
Kategorie	Framework
Lizenz	MIT-Lizenz[4]
deutschsprachig	nein
vuejs.org

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. Zudem wird serverseitiges Rendern unterstützt.^[5]

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.^[6] 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^[7] ausreichend.^[8]

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.

Teile dieses Abschnitts, insbesondere die Code-Beispiele, basieren auf Vue 2 und scheinen seit September 2020 nicht mehr aktuell zu sein. Bitte hilf uns dabei, die fehlenden Informationen zu recherchieren und einzufügen.

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"
    ]
  }
});

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>

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.^[9] 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.^[10] 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.^[11] Es ist auch möglich, Filter anzuwenden, um die Ausgabe von JavaScript-Elementen zu verändern.^[12] 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,^[13] dieser besteht aus mehreren Etappen, welche dazu genutzt werden können, eigene Funktionen aufzurufen. Vor allem die Etappe mounted wird sehr häufig verwendet^[14], 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);
  }
})

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

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.^[22][23] Für die Entwicklungsversion gibt es eine Browsererweiterung für Google Chrome und Mozilla Firefox, um das Debugging der Anwendung zu erleichtern.^[24]

Statt für jede Seite eine neue Vue-Instanz zu erstellen, kann auch durch sogenannte Single-Page-Webanwendungen (SPA) eine einzige Instanz von Vue.js erstellt und auf verschiedene Komponenten per Router-Modul navigiert werden. Dies bietet sich bei größeren Projekten an, wo eine Modularisierung notwendig sein kann.^[25]

Innerhalb von sogenannten Single-File Components (SFC) wird blockweise das HTML, CSS und JavaScript eingefügt. Somit können Komponenten innerhalb von einer Datei entworfen werden.^[26]

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

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

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

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

1. ↑ egghead.io.
2. ↑ Release 3.5.13. 15. November 2024 (abgerufen am 27. November 2024).
3. ↑ registry.npmjs.com. In: npmjs. (abgerufen am 3. März 2023).
4. ↑ github.com. (abgerufen am 16. September 2018).
5. ↑ Evan You: Vue Guide: Server-Side Rendering. In: github.com. 1. Februar 2017, abgerufen am 17. Februar 2017 (englisch). 
6. ↑ Comparison with Other Frameworks – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
7. ↑ Introduction: What is Vue.js? vuejs.com
8. ↑ Jacob Schatz: Why We Chose Vue.js. In: GitLab Blog. 20. Oktober 2016, abgerufen am 17. Februar 2017 (englisch). 
9. ↑ Data Binding Syntax – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
10. ↑ Getting Started – vue.js. In: vuejs.org. Abgerufen am 17. Juli 2016. 
11. ↑ List Rendering - vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016. 
12. ↑ vue.js. In: vuejs.org. Abgerufen am 17. Juli 2016. 
13. ↑ Lebenszyklus
14. ↑ Understanding Vue.js Lifecycle Hooks. Abgerufen am 17. Februar 2017 (englisch). 
15. ↑ Mixins
16. ↑ vuex
17. ↑ Redux
18. ↑ vue-router
19. ↑ awesome-vue
20. ↑ vuejs/vue-resource. In: GitHub. Abgerufen am 17. Juli 2016. 
21. ↑ Evan You: Retiring vue-resource – The Vue Point. In: medium.com. 3. November 2016, abgerufen am 17. Februar 2017. 
22. ↑ Installation – vue.js. In: vuejs.org. Abgerufen am 21. Juli 2016. 
23. ↑ vue.js. In: vuejs.org. Abgerufen am 21. Juli 2016. 
24. ↑ Vue.js devtools. In: chrome.google.com. Abgerufen am 21. Juli 2016. 
25. ↑ Ways of Using Vue: Single-Page Application (SPA). In: vuejs.org. Abgerufen am 15. Juni 2024 (englisch). 
26. ↑ Single-File Components. In: vuejs.org. Abgerufen am 15. Juni 2024 (englisch). 
27. ↑ 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). 
28. ↑ mw:Vue.js
29. ↑ mw:Extension:MediaSearch
30. ↑ listarchive:list/wikitech-l@lists.wikimedia.org/thread/SOZREBYR36PUNFZXMIUBVAIOQI4N7PDU/ 2. August 2021.