Vue.JS (Vue)

Eintrag zuletzt aktualisiert am: 24.05.2022

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 - "Das progressive JavaScript Framework"

Vue.js definiert sich in seiner Unterzeile als "The Progressive JavaScript Framework". Der Begriff "Progressive" spielt hierbei 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 sowohl sehr niedrigen Einstiegshürden in kleinen Szenarien, als auch in mittleren und großen Projekten mit deutlich höheren Architekturanforderungen einsetzen kann:
 Vue.js kann man in einzelne statische HTML-Seiten oder serverseitige gerenderte Dateien per <script>-Tag direkt einbinden. Vue.js steht hier in den Fußtapfen von jQuery.
 Für eine Single-Page-Web-Application inkl. Progressive-Web-App (PWA) kann man Vue.js mit clientseitigem Router und einem Build-System verwenden. Als Werkzeuge verwendet man dann die Vue CLI [https://cli.vuejs.org] oder Vite [https://vitejs.dev].
 Mit Vue.js kann man Web Components / Custom Elements erstellen [https://vue-docs-preview.netlify.app/guide/extras/web-components.html#web-components-vs-vue-components].
 Das serverseitige Prerendering ist möglich [https://vue-docs-preview.netlify.app/guide/scaling-up/ssr.html].
 Auch Static-Site Generationing (SSG), alias "JAMStack" ist möglich, siehe VitePress [https://vitepress.vuejs.org] und Nuxt [https://v3.nuxtjs.org]
 Vue.js kann in hybriden Apps verwendet werden, z.B. bei Electron [https://www.electronjs.org] und dem neueren Tauri [https://tauri.studio] für Desktop App. Ansätze mit spezielle Vue.js-Unterstützung sind Ionic Vue [https://ionicframework.com/docs/vue/overview] für mobile Apps bzw. Quasar [https://quasar.dev] für Desktop, Mobile und als Browser-Erweiterung.

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>