Vue.js-Tutorial, Teil 1: Einstieg, Kontrollstrukturen, Data-Binding

Für immer komplexere Webanwendungen reichen ein bisschen JavaScript, HTML und CSS nicht mehr aus. Entwickler greifen gerne zu Frameworks und Bibliotheken, die ihnen die Arbeit erleichtern. Deren Komplexität soll jedoch möglichst nicht zunehmen, damit der Einstieg und das Auf-dem-Stand-Bleiben leichtfallen.

Ob aktuelle Webframeworks wie Angular und React gerade diese Anforderung erfüllen, lässt sich schwer objektiv beantworten. Die gefühlte Wahrheit ist zumindest, dass der Umfang von Features und deren Möglichkeiten oft mehr Hürden ­aufbauen als beseitigen – zumindest am Anfang, wenn der Einstieg in das Frame­work gelingen soll.

In diesem Spannungsfeld ist mit Vue.js vor einigen Jahren ein weiterer Player auf der Bühne erschienen. Vieles wollte es anders machen als Angular oder React. Bei der Entscheidung, ob das Framework eine reale Alternative ist, hilft vielleicht dieses Tutorial, das einen Blick auf die Grund­lagen, zahlreiche Funktionen und die Prinzipien von Vue.js wirft.

Vue.js, oft einfach Vue genannt und ausgesprochen wie das englische „view“, ist ein clientseitiges JavaScript-Webframe­work zum Erstellen von Single-Page-­Web­anwendungen (SPAs) nach dem MVVM-­Muster (Model – View – View-Model). Seine erste öffentliche Version 0.6 erschien im Dezember 2013, zwei Jahre später kam 1.0 heraus. Damit ist es verglichen mit ­Alternativen noch recht jung. Version 2.0 erschien im September 2016 mit Neuerungen wie serverseitigem Rendern. Erst seitdem erfolgen regelmäßige Updates als „Minor Releases“ im 2er-Branch. Allgemein wirft das bei vielen die Frage auf, wie etabliert Vue als Technologie und wie groß seine Akzeptanz ist.

Weiterentwicklung in kleinen Schritten

Konzeptionell gilt Vue.js als progressiv und inkrementell adaptierbar, insbesondere im Vergleich zu anderen Frameworks. Das klingt nach einem typischen Marketing-Statement. Was steckt also dahinter? Der Begriff progressiv bezeichnet die Weiterentwicklung von Vue. Statt in großen Abständen umfangreiche Updates herauszubringen, entwickelt es sich in kleineren Schritten weiter. Hinter „inkrementell adaptierbar“ verbirgt sich das schrittweise Einbinden in die eigene Anwendung. Im einfachsten Fall reichen dafür etwas JavaScript und HTML aus: Vue erzwingt keine vorgegebene Struktur der Anwendung.

Aufgrund dieser Eigenschaften gilt es als einfacher zu erlernen als Angular oder React. So eine Beurteilung ist zwar immer subjektiv. Es kann jedoch etwas dran sein, wenn man Funktionen nach und nach einsetzen kann, ohne direkt die komplette Struktur eines Frameworks adaptieren zu müssen, nur um einige Daten auf einer Webseite auszugeben.

Vue unterstützt unter anderem Tem­plates, Komponenten, Data-Binding, Events und Direktiven. Zentral für das Arbeiten sind die Vue-Instanzen, von ­denen jede Anwendung mindestens eine besitzt. Grundsätzlich sind aber beliebig ­viele in einer HTML-Datei erlaubt. Eine weitere Kernfunktion sind Komponenten, die Instanzen erweitern und sich verschachteln lassen. Sie enthalten eigenes HTML, das „Template“, und lassen sich im Projekt wiederverwenden. Dazu später mehr.

Des Weiteren nutzt Vue die Tem­plate-Syntax, um zum Beispiel Daten an eine Variable zu binden, die von einer View ausgegeben werden. Attribute und Events lassen sich ebenfalls an Daten oder Funktionen binden. Dadurch wirken sich Daten­änderungen oder Benutzerinteraktionen direkt auf das zugrunde liegende ­Modell aus. Direktiven knüpfen zum Beispiel das Rendern von HTML-Elementen an Bedingungen. 

Im Mittelpunkt: die Vue-Instanz

Im Folgenden geht es primär um die ­erwähnten Kernfunktionen von Vue, mit denen sich erste Anwendungen konzipieren und implementieren lassen. Der Schnellstart zeigt, wie man das Framework in ein Projekt einbindet, erste Daten anzeigt und was grundlegende Eigenschaften von Komponenten sind. In späteren Teilen des Tutorials stehen erweiterte Möglichkeiten der Kernfunktionen im Mittelpunkt, die insbesondere bei größeren, komplexen ­Anwendungen wichtig sind.

Vue setzt für den Einstieg mittlere Kenntnisse von HTML, CSS und JavaScript voraus. Für komplette Anfänger ist es daher nicht geeignet. Wer das Framework risikolos ausprobieren möchte, ist mit einem kleinen Testprojekt gut bedient, das man nach und nach erweitern kann. Anfangs reicht eine kleine HTML-­Datei, um zunächst Vue einzubinden, und etwas HTML-Markup, das zur eigentlichen Anwendung gehört:

<script 
  src="https://cdn.jsdelivr.net/npm/vue /dist/vue.js">
</script> 
<div id="app"> 
  <p>{{ msg }}</p> 
</div>

Dieser Code alleine tut jedoch noch nichts, außer {{ msg }} anzuzeigen. Das Skript­element bindet die Developer-Version von Vue ein. Für den produktiven Einsatz gibt es eine Variante, die zum Beispiel weniger Meldungen auf der Konsole ausgibt. So erscheint eine Konsolenausgabe, wenn das Framework ein Element nicht finden kann:

[Vue warn]: Cannot find element: 
#app warn @ vue.js:634

Für den Blick auf die Konsole empfiehlt es sich, die Entwicklerwerkzeuge des ­genutzten Browsers griffbereit zu haben. Für eine erste funktionsfähige Anwendung fehlt noch eine Vue-Instanz:

new Vue({ 
  el: "#app", 
  data: { msg: "Hello Vue!" } 
});

Die Vue-Instanz referenziert ein HTML-­Element per el. Dieses Element muss im DOM existieren, damit sich die Instanz dort einklinken kann. Des Weiteren gibt es das Datenobjekt data. Darin können sich reaktive Daten befinden: Ändern sie sich, spiegelt die Oberfläche diese Änderung wider. Hier geschieht dies durch die Text-Interpolation der Variablen msg im p-Element des HTML-Snippets.