Vue.js
| Vue.js
| |
|---|---|
| |
| Basisdaten
| |
| Hauptentwickler | Evan You |
| Entwickler | Evan You, Online-Community |
| Erscheinungsjahr | 2013 |
| Aktuelle Version | 1.0.26 (28.06.2016) |
| Aktuelle Vorabversion | 2.0.0-beta.2 (17.07.2016) |
| Betriebssystem | Plattformunabhängig |
| Programmiersprache | JavaScript |
| Kategorie | Framework |
| Lizenz | MIT-Lizenz |
| deutschsprachig | nein |
| vuejs.org | |
Vue.js (englische Aussprache [vjuː]) ist ein clientseitiges JavaScript-Framework zum Erstellen von Single-Page-Applications nach dem MVVM-Muster.
Konzept
Die Entwickler bezeichnen Vue.js als less opinionated im Vergleich zu anderen Frameworks. 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 Angular.js, da die API einfach gehalten wurde.[1]
Durch Umsetzung des MVVM-Musters bietet Vue.js die Möglichkeit des Databindings, sodass 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.
Struktur
Die Vue-Instanz
Jede Anwendung mit Vue.js hat (mindestens) eine zentrale Instanz. Diese 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"]
}
});
Double Curly Syntax
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.[2] 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.[3]
<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>
Direktiven
Mit HTML-Attributen ist es möglich, Aktionen auszuführen, wie zum Beispiel mit einer Schleife durch ein Array zu iterieren. Die Direktiven von Vue.js sind an dem Präfix v- erkennbar.[4] Es ist auch möglich, Filter anzuwenden, um die Ausgabe von JavaScript-Elementen zu verändern.[5]
<ul>
<li v-for="item in items">
{{ item }} <!-- Ausgabe des Wertes -->
{{ item | lowercase }} <!-- Ausgabe des Wertes in Kleinbuchstaben -->
</li>
</ul>
Modularität
Vue.js kann durch Erweiterungen ergänzt werden. So gibt es beispielsweise eine Erweiterung zum Durchführen von HTTP-Requests.[6]
Varianten
Von Vue.js gibt es sowohl eine Entwicklungs- als auch Produktivversion.[7] 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.[8]
Für die Entwicklungsversion gibt es eine Erweiterung für Google-Chrome, um das Debugging der Anwendung zu erleichtern.[9]
Siehe auch
Weblinks
- Offizielle Webpräsenz (englisch)
- Offizielles Forum (englisch)
- Vue.js devtools – Erweiterung für Google-Chrome
Einzelnachweise
- ↑ Comparison with Other Frameworks – vue.js. In: vuejs.org. Abgerufen am 15. Juli 2016.
- ↑ 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.
- ↑ vuejs/vue-resource. In: GitHub. Abgerufen am 17. Juli 2016.
- ↑ 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.