Einführung in Vue.js

Die Kernfunktionen von Vue

Deklarative Wiedergabe

Reaktivität

Struktur eines Vue-Projekts

Vue besteht aus mehreren kleinen Komponenten, welche zusammen die Applikation bilden.

Die Root-Komponente

Ganz oben in einer Vue-Applikation steht die Root-Komponente. Der Root-Komponente werden alle anderen Komponenten als Kinder zugewiesen.

Single-File Components

In Vue werden Komponenten (Single-File Components) verwendet. Wie es der Name schon sagt, wird die Logik, das Template und das Design alles in einer Datei gespeichert, was das Wiederverwenden der Komponente um einiges vereinfacht.

Jede Komponente besteht aus einem <template> und einem <script> Tag. In dem <template> Tag wird das Template mithilfe von HTML erstellt. Im <script> Tag steht die Logik einer Komponente. Im obigen Beispiel erstellen wir im <script> Tag eine Variable namens count mit dem Wert 0. Im <template> wird, wenn der Button gedrückt wird, die Variable count um 1 erhöht. Vue erkennt die Änderung und lädt die Komponente neu. Durch {{*<Variable>*}} können Variablen dem HTML hinzugefügt werden.

Der <script> Tag bietet uns aber noch mehr Möglichkeiten als nur Variablen zu deklarieren. Wir können für komplizierteren Code, der nicht in eine Zeile passt, Methoden erstellen.

In methods: {} habe ich zwei Methoden erstellt. Die eine erhöht den Wert der Variable count um 1, damit wir dies nicht mehr im <template> machen müssen und die andere reduziert den Wert wiederum um 1. Um diese Funktionen benutzen zu können, müssen wir das <template> anpassen.

Einige Sachen haben sich verändert. Der Text, welcher uns den aktuellen Wert der Variable count anzeigt, steht nun in einem <div> Tag. Als Nächstes habe ich zwei <button> Elemente erstellt. Der eine erhöht den Wert bei Knopfdruck, während der andere den Wert verringert. Methoden werden aufgerufen, indem man den Namen der Methode im Event-Handler @click angibt.

Neben normalen Methoden gibt es noch sogenannte Lifecycle-Hooks. Diese werden an bestimmten Momenten des Lebenszyklus einer Applikation aufgerufen. Dies sind die unterschiedlichen Lifecycle-Hooks von Vue:

• onMounted() → Was in dieser Methode steht, wird ausgeführt, nachdem die Komponente erstellt wurde.
• onUpdated() → Diese Methode wird ausgelöst, sobald sich der Stand des Codes ändert und die Komponente neu lädt.
• onUnmounted() → Diese Methode wird ausgelöst, sobald die Applikation geschlossen wurde.
• onBeforeMount() → Diese Methode wird aufgerufen, bevor die Komponente erstellt wurde.
• onBeforeUpdate() → Diese Methode wird aufgerufen, nachdem die Komponente aufgrund eines Updates neu geladen wurde.
• onBeforeUnmount() → Diese Methode wird aufgerufen, bevor die Applikation geschlossen wird.

Weitere Hooks findest du in den Docs:

In unserem Beispiel können wir nun den onUnmounted() Hook verwenden um den letzten Wert von der Variable count auszugeben.

Warum Vue?

Vue ist ein leichtes Framework, heißt, es braucht nicht viel Speicherplatz und ist schnell. Es kann in bereits bestehenden Projekten leicht integriert und angepasst werden. Außerdem ist es einfach für Anfänger zu verstehen und lernen, alles was man braucht ist etwas Wissen über HTML, CSS und Javascript. Single-File Components machen das Verstehen des Codes, sowie das Wiederverwenden von Komponenten leichter. So kannst du mehr Zeit damit verbringen, Neues zu entwickeln. Vue bietet ebenfalls eine tolle Dokumentation. Diese wird ständig verbessert und geupdated. Sie enthält alle wichtigen Themen, solltest du mal nicht weiter kommen.

Vue ist eines von vielen JS-Frameworks. Welche die beliebtesten sind und inwiefern sie sich unterscheiden, haben wir dir in unserem Beitrag über JS-Frameworks erklärt!