Was ist Vue.js?
Vue.js ist ein weiteres JavaScript Framework. Jedoch mit dem grossen Unterschied, dass man sehr simpel beginnen kann, jedoch immer noch die Möglichkeit hat, sich nach und nach weitere Tools und Features hinzuzufügen. Somit ist es Ihnen möglich, einfache Widgets zu bauen oder aber auch ganze Applikationen. Dabei wird bei Vue.js auf komponentenorientierte Entwicklung gesetzt, wie es bereits bei Angular oder React bekannt ist. Die Entwickler beschreiben ihr eigenes OpenSource Framework selbst als ein sehr zugängliches, vielseitiges und leistungsfähiges Web-Framework, mit welchem wartbare und testbare Anwendungen geschrieben werden können.
Einstieg in VueJS
Bevor Sie mit dem Coden mit Vue.js beginnen können, müssen Sie NodeJS installiert haben. Sobald Sie dies haben, können
Sie den vue-cli
Helfer installieren. Dieser hilft Ihnen beim Erstellen und Verwalten von Vue.js Applikationen.
|
|
Wenn die Installation abgeschlossen ist, können Sie innerhalb des Terminals in den Ordner wechseln, in dem Sie Ihre Vue.js App erstellen möchten. Den Erstellungsvorgang können Sie wie folgt starten:
|
|
Dabei müssen Sie anschliessend zwischen Features entscheiden, die Sie installieren möchten. Entweder nehmen Sie die Standardeinstellungen von Vue.js oder wählen selbst aus einer gegebenen Liste aus.
Sobald die Erstellung des Projekts abgeschlossen ist, können Sie in den dadurch bereitgestellten Ordner wechseln und den lokalen Server starten.
|
|
In Folge dessen können Sie standardmässig über folgende IP-Adresse auf die Applikation zugreifen:
http://localhost:8080/
Sobald Sie eine Applikation erstellt haben, können Sie Ihr Projekt-Ordner mit dem Befehl code .
direkt in VS
Code öffnen.
Aufbau einer Komponente
Eine Komponente in Vue.js ist meist in drei Teile unterteilt.
Der erste Abschnitt wird durch eine <template>
-Area gebildet. Darin wird der Aufbau der Komponente mithilfe von
HTML-Tags vorgenommen.
|
|
Der nächste Bereich wird durch ein <script>
Feld gekennzeichnet. Innerhalb davon finden die Import-Statements
statt, ebenso wie die export Definition für die Komponente selbst.
|
|
Der letzte Bestandteil ist für das Styling der Komponente vorgesehen. Wie von HTML bekannt, wird dieser Bereich
durch das <stlye>
Tag beschrieben.
|
|
Verwenden einer Komponente
Wenn Sie eine eigene Komponente erstellt haben, muss diese mindestens die beiden Teile <script>
und
<template>
enthalten. Dabei müssen Sie auf jeden Fall beim Export den Namen der Komponente bestimmen, damit Sie
die Komponente in einer anderen Komponente importieren und verwenden können. Sie werden jedoch in den nächsten
Schritten sehen, wie sich dieser Export mit weiteren Informationen füllen wird.
|
|
Möchte Sie nun diese Komponente beispielsweise in der Standard App.vue
Komponente verwenden, müssen Sie die
Komponente MeineButtons.vue
importieren und zusätzlich im Export-Statement als Komponente angeben.
|
|
Anschliessend können Sie die neu importierte Komponenten in dem darüber liegenden <template>
-Abschnitt, wie folgt
verwenden:
|
|
Event-Handling - v-on
Möchten Sie auf verschiedene DOM Events reagieren, benötigen Sie hierfür die v-on:
Direktive. Dadurch ist es
Ihnen möglich, JavaScript Code laufen zu lassen, sobald das Event getriggert wird. Nach dem Doppelpunkt müssen Sie
zunächst das gewünschte Event bestimmen. In dem unteren Beispiel handelt es sich um ein click
-Event. Nach dem
Gleichheitszeichen können Sie entweder direkt den gewünschten JavaScriptCode angeben oder einen Methodenaufruf
ausführen. Anstatt v-on:
gibt es noch die Shorthand Version mit einem @-Zeichen.
|
|
In diesem Beispiel verwendet der erste Button die Shorthand-Version @click
und JavaScript Code direkt dahinter.
Bei dem zweiten Button wird die Standardvariante mit v-on:
verwendet. Dafür wird hier die Methode minus1
aufgerufen.
Anwenden von Methoden
Wie Sie in dem vorherigen Beispiel sehen können, wird bei beiden Funktionen ein Variable zaehler
genutzt.
Die Variable definieren sie in dem Teil data()
, die Methode dagegen müssen Sie zur Unterteilung innerhalb des
methods
-Bereich definieren. Wenn Sie die Methode wie unten gezeigt definiert haben, können diese nun wie im oberen
Beispiel aufgerufen werden.
|
|
Custom Events
Sie werden bestimmt öfters den Fall haben, dass Sie Werte von einer Child-Komponente zu einer Parent-Komponente
geben wollen. Dafür benötigen Sie die Möglichkeit, auf ein Event zu reagieren und zusätzlich die Funktionalität
$emit()
.
In diesem Beispiel handelt es sich um den Button innerhalb der Komponente MeineButtons.vue
. Des Weiteren sehen
Sie aber noch eine neues @click
-Event, welcher die Methode meinCustomEvent
aufruft. Die Methode nimmt
zusätzlich noch die Variable zaehler
als Parameter entgegen.
|
|
Nun können Sie in dem Abschnitt methods
die dazugehörige Implementierung der zuvor erwähnten Methode sehen. Hier
ist das Besondere der Methoden-Aufruf mit this.$emit()
. Als ersten Parameter müssen Sie den Namen angeben, über den
aus der Parent-Klasse darauf zugegriffen werden kann. Der zweite Parameter ist die Variable, die Sie nach “oben”
weitergeben wollen.
|
|
Nun müssen Sie nur noch die Anwendung in der Parent-Klasse (App.vue
) implementieren. Dafür nutzen Sie die
importierte Komponente namens <MeineButtons>
. Anschliessend können Sie das im vorherigen Schritt definierte Event
callMeinCustomEvent
angeben. Sobald dieses Event getriggert wird, soll die Methode meinCustomEventAusfuehren
aufgerufen werden.
|
|
Als Nächstes müssen Sie natürlich auch noch die Methode meinCustomEventAusfuehren
erstellen. Diese benötigt
einen Parameter, welchen Sie in aus der MeineButtons
Komponente nach “oben” reichen. In diesem Fall soll es als
Nachricht auf dem Bildschirm ausgegeben werden. Dieser ist in diesem Beispiel die zaheler
Variable aus
MeineButtons.vue
.
|
|
Bindings
Möchten Sie beispielsweise einem Button, einer Komponente oder sonst irgend einem Element eine Klasse oder ein Style
hinzufügen, welches sich je nach Situation ändern soll, macht man die am besten über ein Attribut. Dazu gibt es die
Direktive v-bind:
. In anderen Frameworks ist dies auch als 2-Way-Data-Binding bekannt. Anhand des Beispiels können
Sie sehen, dass dem einen Button eine Klasse negativ
und dem anderen Button eine Klasse positv
hinzugefügt
werden. Je nachdem, ob die Zähler Variable grösser oder kleiner Null ist, wird diese anhand von true oder
false gesetzt. Auch hier gibt es eine kürzere Schreibweise, Sie können einfach v-bind
weglassen und nur
:class
schreiben.
|
|
Nun sollen die Klassen einen separaten Style bekommen, dazu können Sie in dem Style-Abschnitt die beiden Klasse anlegen und die gewünschten Änderungen bestimmen.
|
|
Weitere Direktiven von VueJS währen noch v-if
und v-for
.
Falls dieser Blog-Beitrag Ihr Interesse geweckt hat, gibt es ein Tutorial, mit welchen Sie eine ToDo-Liste erstellen können