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

Vue.js
Basisdaten
Hauptentwickler	Evan You
Entwickler	Evan You, Online-Community
Erscheinungsjahr	Februar 2014
Aktuelle Version	3.4.30 (22. Juni 2024)
Betriebssystem	Plattformunabhängig
Programmier­sprache	JavaScript (bis Version 2.6) TypeScript (ab Version 3.0)
Kategorie	Framework
Lizenz	MIT-Lizenz
deutschsprachig	nein
vuejs.org

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.

Entwicklungsversion

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

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.

Single-File Components

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.

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

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