November 2022
Chart.js ist eine simple, aber auch flexible Javascript-Bibliothek, die dir ermöglicht, verschiedene Arten an Diagrammen...
Vue ist ein Javascript-Framework, welches benutzt wird, um User Interfaces (Bedienungsoberflächen) im Web zu entwickeln. Es nutzt HTML, CSS und Javascript als Grundbausteine. Mithilfe von deklarativem und komponenten-basiertem Programmieren bietet Vue eine Umgebung, in welcher Benutzeroberflächen, egal ob simpel oder komplex, effizient erstellt werden können.
Deklaratives Programmieren
Beim deklarativen Programmieren muss der Kontrollfluss des Programmes nicht mehr beachtet werden. Stattdessen muss man nur angeben, was gemacht werden muss und was das gewünschte Endprodukt ist.
Als Kontrollfluss wird die Reihenfolge beschrieben, in der ein Programm Anweisungen ausführt.
Komponenten-basiertes Programmieren
Im komponenten-basierten Programmieren wird ein Programm in alleinstehende Teile aufgeteilt, welche zusammen die gewünschte Applikation bilden. Diese Teile können auch einfach in anderen Projekten wiederverwendet werden.
Beim deklarativen Programmieren muss der Kontrollfluss des Programmes nicht mehr beachtet werden. Stattdessen muss man nur angeben, was gemacht werden muss und was das gewünschte Endprodukt ist.
Als Kontrollfluss wird die Reihenfolge beschrieben, in der ein Programm Anweisungen ausführt.
Komponenten-basiertes Programmieren
Im komponenten-basierten Programmieren wird ein Programm in alleinstehende Teile aufgeteilt, welche zusammen die gewünschte Applikation bilden. Diese Teile können auch einfach in anderen Projekten wiederverwendet werden.
Die Kernfunktionen von Vue
Deklarative Wiedergabe
Vue erweitert die HTML-Syntax, sodass man nun dazu in der Lage ist, die Ausgabe über den aktuellen Status des Javascript-Codes zu steuern.
Reaktivität
Vue kontrolliert den aktuellen Status des Javascript-Codes. Sobald sich etwas verändert, werden Teile der Seite, die betroffen sind mit den veränderten Daten neu geladen.
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:
Weitere Hooks findest du in den Docs:
Composition API: Lifecycle Hooks | Vue.js
Vue.js - The Progressive JavaScript Framework
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!
Welches ist das ideale JS Framework für mein Projekt? - Blog
JavaScript ist die Sprache, die das Web beherrscht! Aber beim Entwickeln einer Webseite musst du dich nicht allein auf...
