Sie sind hier: Wissen
Logo der Firma www.IT-Visions.ch
MENU

Erklärung des Begriffs: Vue.JS (Vue)

Begriff Vue.JS
Abkürzung Vue
Eintrag zuletzt aktualisiert am 24.05.2022

 Zur Stichwortliste unseres Lexikons

Was ist Vue.JS ?

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>

Beratung & Support

Schulungen zu diesem Thema
 Umstieg von ASP.NET auf moderne Webtechniken (Single-Page-Web-Applications mit HTML, CSS, JavaScript/TypeScript, Angular, Vue.js, React u.a.)
 Umstieg von .NET-Desktop-Entwicklung (WPF/Windows Forms) auf Webentwicklung (ASP.NET/ASP.NET Core + JavaScript/TypeScript mit Webframeworks wie Angular, Vue.js oder React)
 Vergleich von Angular, React und Vue.js
 Vue.js
 Single-Page-Web-Applications (SPAs) entwickeln mit HTML5/CSS3 und JavaScript (oder TypeScript)
 Hasura
 JavaScript/ECMAScript zur Browserprogrammierung - Basiswissen (Grundlagen für Einsteiger)
 Application Insights (Überwachung/Monitoring von Software/Telemetriedaten)
 Progressive Web Apps (PWA)
 Prototyp-Workshop: Eine moderne Webanwendung mit HTML5, CSS und JavaScript (oder TypeScript)
 AJAX (Asynchronous JavaScript and XML) - Basistechnik für moderne Webanwendungen (Rich Internet Applications)
 Geschäftsanwendungen mit HTML 5.x und JavaScript (oder TypeScript): Moderne Web 2.0-/HTML5-Browser-Webanwendungen und Mobilanwendungen entwickeln
 Webanwendungsarchitektur und Einführung in die aktuellen Web-Technologien (Moderne Webanwendungen, mobile Webanwendungen)
 JavaScript und moderne Webanwendungen/Cross-Platform-Anwendungen für Entscheider
 Web-Frameworks (JavaScript- und TypeScript-Bibliotheken) im Überblick und Vergleich
 Plattformneutrale Hybrid-Anwendungen mit HTML5 und JavaScript (oder TypeScript) mit Electron (Hosted/Hybrid Web Apps)
 DevOps / Continuous Integration (CI)/Continuous Delivery (CD) mit Pipelines in Azure DevOps Server / Azure DevOps Services (ADO) - Build- und Releasemanagement
 TypeScript - die typsichere und klassenbasierte Erweiterung für JavaScript
 ASP.NET Core WebAPI 8.0/9.0: REST Services/HTTP Services/Microservices
 ASP.NET Core 8.0/9.0: komplettes Wissen - mit MVC, Razor Pages, Blazor, WebAPIs und gRPC
 Moderne Web-Anwendungen mit ASP.NET (Core) MVC, WebAPI, HTML5.x/CSS3 und JavaScript-/TypeScript-Frameworks
 JavaScript und TypeScript für die moderne Web- und App-Entwicklung
 Web Components (wiederverwendbare HTML5-Komponenten)
 JavaScript/ECMAScript zur Browserprogrammierung - Aufbauwissen
 GraphQL
 Entwickeln von Office-Web-Add-Ins mit JavaScript/TypeScript
 Überblick über die Werkzeuge für die moderne Anwendungsentwicklung mit JavaScript oder TypeScript
 Web-Benutzeroberflächentests (UI-Tests/Web-Tests) und Komponententests mit Cypress
 Web-Benutzeroberflächentests (UI-Tests/Web-Tests) und Komponententests mit Playwright
 Anfrage für eine individuelle Schulung zum Thema Vue.JS Vue  Gesamter Schulungsthemenkatalog