Vue.JS

Eintrag zuletzt aktualisiert am: 03.10.2021


Vue.JS ist ein JavaScript-basiertes Webframework für den Webbrowser zur Erstellung von Single-Page-Webanwendungen (SPA). Der Einsatz von TypeScript ist möglich.

Die erste Version von Vue.js ist 2014 erschienen. uch ein serverseitiges Rendern ist seit Version 2.0 möglich. Die aktuelle, unter dem Codenamen "One Piece" entwickelte Version 3.0 wurde im September 2020 veröffentlicht.

Anders als bei Angular (von Google) und React (von Facebook) steht hinter Vue.js keine große Firma, sondern lediglich eine Community auf GitHub [https://github.com/vuejs/vue] mit Elan You als Chefentwickler. Dennoch nutzen große Unternehmen wie BMW, Adobe, Nintendo, Alibaba, GitLab dieses Webframework (siehe [https://www.google.com/search?q=who+is+using+vuejs]).

Open Source auf Github: https://github.com/vuejs

Vue.js definiert sich in seiner Unterzeile als "The Progressive JavaScript Framework". Der Begriff "Progressive" spielt hier bei aber nicht auf Progressive Web Apps (PWA) an (wenn gleich sie auch möglich sind mit Vue.js), sondern auf die Tatsache dass man Vue.js mit sehr niedrigen Einstiegshürden in kleinen Szenarien einsetzen kann, aber auch in mittleren und großen Projekten mit deutlich höheren Architekturanforderungen.

Beispiel
Listing 1 zeigt, wie man Vue.js in jede beliebige HTML-Seite einbetten kann: Einfach über eine <script>-Tag mit Verweis auf die Bibliotheksdatei Vue.js, die man lokal haben kann oder – wie in Listing 1 gezeigt – per CDN beziehen kann. So eignet sich Vue.js, um statische HTML-Seiten oder serverseitige gerenderte Dateien auf einfache Weise anzureichern. Vue.js steht hier in den Fußtapfen von jQuery. Listing 1 zeigt bereits Einiges mehr als ein einfaches Hello World:
 Erstellung einer Vue-Instanz mit Bezug auf ein HTML-Element mit id="app"
Variablen der Seite in dem Attribut data
 Berechnete Werte im Attribut Computed
 Eigene Methoden (methods:), die Variablen ändern
 Behandlung des Lebenszyklus-Ereignisses mounted
 Ausgabe von Variablen und berechneten Werte mit {{ xy }}
 Bedingte Ausgabe mit v-if
 Iteration mit v-for="x in menge"
 Bedingte Anwendung von CSS-Klassen und CSS-Styles

Die Sprachsyntax in Listing 1 ist JavaScript. Die in Listing 1 gezeigte Trennung von Variablen und Methoden in verschiedene Sektionen im Programmcode ist charakteristisch für das sogenannte Options API von Vue.js und auch der Hauptkritikpunkt am Options API: Der Entwickler kann den Code nicht nach logischen Gesichtspunkten anordnen, sondern muss ich den Regeln von Vue.js unterwerfen. In größeren Komponenten wird es dann schnell unübersichtlich. Wenn man viele kleine Komponenten erstellt, stört einen schnell die zusätzliche Tipparbeit für das Options API. Das Options API hat viel störenden Boilerplate-Code [https://de.wikipedia.org/wiki/Boilerplate-Code].

Listing 1: Quadratwurzelrechner als Beispiel für die einfache Einbettung von Vue.js in beliebige HTML-Seiten
<html>
<head>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
<style>
li { margin: 2px; }
li::marker { color:red; }
.even { color: green}
.odd { color: blue}
</style>
</head>

<div id="app">
<h2>{{this.$options.name }}</h2>
<h4>{{author}}</h4>
<div>Counter: {{ count }}
<button @click="increment">+1</button> Quadratwurzel: {{result.toFixed(2)}}
</div>
<hr>
<h3 v-if="all.size > 0">{{all.size}} Ergebnisse:</h3>
<ul>
<li v-for="[key,value] in all"
v-bind:class="{'even': key%2==0, 'odd': key%2!=0}">
<!-- or: v-bind:style="{color: (key%2==0 ? 'red' : 'green')}"> -->
{{key}} = {{value.toFixed(2)}}
</li>
</ul>
</div>

<script>
var app = new Vue({
name: "Quadratwurzelrechner in Vue.js",
el: '#app',
data: {
count: 0,
author: '© Dr. Holger Schwichtenberg',
all: new Map()
},
computed:
{
result: function () {
return Math.sqrt(this.count)
}
},
methods: {
increment: function () {
this.count++;
this.all.set(this.count, this.result);
}
},
mounted: function () {
console.log(this.$options.name + ": mounted!");
this.author += " " + new Date().getFullYear();
}
})
</script>
</html>