Vue.js – Wikipedia
Vue.js
| |
---|---|
![]() | |
Basisdaten
| |
Hauptentwickler | Evan You |
Entwickler | Evan You, Online-Community |
Erscheinungsjahr | Februar 2014[1] |
Aktuelle Version | 3.4.34[2] (24. Juli 2024) |
Betriebssystem | Plattformunabhängig |
Programmiersprache | JavaScript (bis Version 2.6) TypeScript (ab Version 3.0) |
Kategorie | Framework |
Lizenz | MIT-Lizenz[3] |
deutschsprachig | nein |
vuejs.org |
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.[4]
Konzept
[Bearbeiten | Quelltext bearbeiten]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.[5] 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[6] ausreichend.[7]
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
[Bearbeiten | Quelltext bearbeiten]Die Vue-Instanz
[Bearbeiten | Quelltext bearbeiten]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
[Bearbeiten | Quelltext bearbeiten]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
[Bearbeiten | Quelltext bearbeiten]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.[8] 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.[9] Die Direktive model sorgt für das Databinding mit Input-Elementen.
<div id="demo"> <p>{{ message }}</p> <input v-model="message"> </div>
Direktiven
[Bearbeiten | Quelltext bearbeiten]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.[10] Es ist auch möglich, Filter anzuwenden, um die Ausgabe von JavaScript-Elementen zu verändern.[11] 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
[Bearbeiten | Quelltext bearbeiten]Alle Instanzen und Komponenten durchlaufen einen Lebenszyklus,[12] dieser besteht aus mehreren Etappen, welche dazu genutzt werden können, eigene Funktionen aufzurufen. Vor allem die Etappe mounted wird sehr häufig verwendet[13], 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
[Bearbeiten | Quelltext bearbeiten]Vue.js kann durch Erweiterungen ergänzt werden, diese können Mixins,[14] Direktiven, Filter, Komponenten und Objekte enthalten. Als offizielle Erweiterungen werden vuex,[15] ein an Redux[16] angelehnter Zustandsmanager, und vue-router,[17] ein Komponenten-Router, angeboten. Unter awesome-vue[18] wird eine aktuelle Auflistung an Erweiterungen gepflegt. So gibt es beispielsweise eine Erweiterung zum Durchführen von HTTP-Requests.[19] Diese wurde jedoch als offizielle Bibliothek aus dem Vue.js-Portfolio entkoppelt.[20]
Entwicklungsversion
[Bearbeiten | Quelltext bearbeiten]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.[21][22] Für die Entwicklungsversion gibt es eine Browsererweiterung für Google Chrome und Mozilla Firefox, um das Debugging der Anwendung zu erleichtern.[23]
Single-Page-Webanwendungen
[Bearbeiten | Quelltext bearbeiten]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.[24]
Single-File Components
[Bearbeiten | Quelltext bearbeiten]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.[25]
<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
[Bearbeiten | Quelltext bearbeiten]Vue.js ist die offizielle Wahl der Wikimedia Foundation für die Verwendung als zukünftiges JavaScript-Framework für MediaWiki.[26][27] Beispielsweise wurde die neue Mediensuche auf Wikimedia Commons mit Vue.js realisiert.[28]
“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.”
Siehe auch
[Bearbeiten | Quelltext bearbeiten]Weblinks
[Bearbeiten | Quelltext bearbeiten]- Offizielle Webpräsenz (englisch)
- Offizielles Forum (englisch)
- Vue js Examples
- Vue.js devtools – Erweiterung für Google-Chrome
Einzelnachweise
[Bearbeiten | Quelltext bearbeiten]- ↑ egghead.io.
- ↑ Release 3.4.34. 24. Juli 2024 (abgerufen am 28. Juli 2024).
- ↑ github.com. (abgerufen am 16. September 2018).
- ↑ Evan You: Vue Guide: Server-Side Rendering. In: github.com. 1. Februar 2017, abgerufen am 17. Februar 2017 (englisch).
- ↑ Comparison with Other Frameworks – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016.
- ↑ Introduction: What is Vue.js? vuejs.com
- ↑ Jacob Schatz: Why We Chose Vue.js. In: GitLab Blog. 20. Oktober 2016, abgerufen am 17. Februar 2017 (englisch).
- ↑ Data Binding Syntax – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016.
- ↑ Getting Started – vue.js. In: vuejs.org. Abgerufen am 17. Juli 2016.
- ↑ List Rendering - vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016.
- ↑ vue.js. In: vuejs.org. Abgerufen am 17. Juli 2016.
- ↑ Lebenszyklus
- ↑ Understanding Vue.js Lifecycle Hooks. Abgerufen am 17. Februar 2017 (englisch).
- ↑ Mixins
- ↑ vuex
- ↑ Redux
- ↑ vue-router
- ↑ awesome-vue
- ↑ vuejs/vue-resource. In: GitHub. Abgerufen am 17. Juli 2016.
- ↑ Evan You: Retiring vue-resource – The Vue Point. In: medium.com. 3. November 2016, abgerufen am 17. Februar 2017.
- ↑ Installation – vue.js. In: vuejs.org. Abgerufen am 21. Juli 2016.
- ↑ vue.js. In: vuejs.org. Abgerufen am 21. Juli 2016.
- ↑ Vue.js devtools. In: chrome.google.com. Abgerufen am 21. Juli 2016.
- ↑ Ways of Using Vue: Single-Page Application (SPA). In: vuejs.org. Abgerufen am 15. Juni 2024 (englisch).
- ↑ Single-File Components. In: vuejs.org. Abgerufen am 15. Juni 2024 (englisch).
- ↑ Eric Gardner und Anne Tomasevich: 2020: The Year in Vue. In: techblog.wikimedia.org. Wikimedia Foundation, 22. Januar 2021, abgerufen am 7. Dezember 2021 (englisch).
- ↑ mw:Vue.js
- ↑ mw:Extension:MediaSearch
- ↑ listarchive:list/[email protected]/thread/SOZREBYR36PUNFZXMIUBVAIOQI4N7PDU/ 2. August 2021.