Interaktive Anwendung mit Vue.js
Vue.js is ein JavaScript-Framework zur Erstellung einfacher und komplexer Single-Page-Webanwendungen. Insbesondere in den letzten Jahren hat Vue.js an großer Beliebtheit unter Entwicklern gewonnen und zählt zu den beliebtesten JavaScript-Anwendungen.
Brauche ich JavaScript / Vue.js?
Schließlich sind wir hier auf einer Website, um der es um PHP geht ;).
Brauchen tut man natürlich gar nichts, aber mittlerweile erwarten viele Benutzer entsprechend interaktive Websites. Sucht man in einem Eingabefeld nach etwas, zum Beispiel nach einem Namen, wünscht man sich als Besucher der Seite einen direkten Vorschlag mit möglichen Namen / Einträgen / E-Mail-Adressen. Diese Interaktivität in PHP zu realisieren ist nicht möglich, da PHP auf dem Server läuft. Dies nur in HTML zu realisieren ist oft auch nicht möglich.
Als Lösung bleibt dort nur JavaScript. Ich persönlich kombiniere gerne JavaScript im Front-End, um entsprechende interaktiven Funktionen anzubieten, zusammen mit PHP auf dem Server, um Daten zu verwalten, zu speichern, und zu löschen.
Natürlich lässt sich die Interaktivität direkt in JavaScript schreiben. Auf ein Framework wie React oder Vue.js zu setzen vereinfacht die Arbeit aber erheblich.
Vue.js vs React
Vue.js und React haben bei ein ähnliches Ziel (Single-Page-Webanwendungen), die Herangehensweise ist aber unterschiedlich. Ob man Vue.js oder React nutzen sollte ist schwer zu entscheiden und hängt stark von den eigenen Präferenzen ab. Auf Vue.js findet ihr einen langen Artikel, der beide Frameworks vergleicht: Vue.js Comparison with other Frameworks
Ich persönlich empfinde den Hauptunterschied zwischen den beiden Anwendungen wo / wie JavaScript eingebunden wird. In React besteht alles aus JavaScript. Auch eure HTML-Elemente befinden sich im JavaScript-Code mittels JSX-Code. Ebenso wird zum Teil CSS-Code mit in den JavaScript-Code eingebunden.
Bei Vue.js wird eher der traditionelle Ansatz gewählt und HTML-Code, JavaScript-Code, und Style-Code/CSS-Code werden getrennt von einander verwaltet. Dies macht es nach meiner Einschätzung auch einfacher Vue.js nachträglich in eine bestehende Webanwendung zu integrieren. Es können gezielte Bereiche der Website rausgesucht werden, die dynamisch gestaltet seien müssen. Diese ergänzt man um entsprechende Vue.js-Elemente.
Ebenfalls hat React eine recht steile Lernkurve. Bevor es genutzt werden kann, muss man JSX verstehen, wissen was ES2015+ ist und sich mit Build-Systemen und Package-Managern auskennen. Bei Vue.js ist die Integration zum Glück deutlich einfacher: Man lädt schlicht ein eine fertige JavaScript-Datei und kann direkt loslegen und Vue.js Elemente in der Anwendung verwenden.
Erste Vue.js Anwendung
Die Dokumentation von Vue.js bietet einen guten Einstieg für den Start: Vue.js Getting started
Die typische Beispielanwendung ist immer eine To-Do-Liste. Doch dies ist etwas langweilig, daher zeige ich nachfolgend ein Script für ein kleines Roulette-Spiel wie bei einem Online Casino:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.JS Beispiel</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button v-on:click="bet('Schwarz')">Schwarz</button> <button v-on:click="bet('Rot')">Rot</button> <br><br> <span v-html="message"></span> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Herzlich Willkommen! Wähle eine Farbe' }, methods: { bet: function (farbe) { this.message = 'Sie haben gewählt: '+farbe; this.message += '<br/> Das Rad wird gedreht...'; setTimeout(function() { var zahl = Math.floor(Math.random()*37); var zahlFarbe; if(zahl == 0) { zahlFarbe = "Grün"; } else if(zahl % 2 == 0) { zahlFarbe = "Schwarz" } else { zahlFarbe = "Rot" } this.message += "<br /> Es wurde entschieden: "+zahl+" - "+zahlFarbe; if(zahlFarbe == farbe) { this.message += "<br /> Glückwunsch, Sie haben gewonnen!"; } else { this.message += "<br /> Schade, dies mal hat es nicht geklappt"; } }.bind(this), 3000); } } }) </script> </body> </html> |
Das Ergebnis könnt ihr hier betrachten: vuejs-beispiel.html
Der Code beginnt mit dem einbinden von Vue.js. Dabei könnt ihr zwischen der Development-Version:
|
1 2 |
<!-- development version, includes helpful console warnings --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
und der Produktiv-Version wählen:
|
1 2 |
<!-- production version, optimized for size and speed --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> |
Weiter geht es mit dem HTML Code für eure App. Hier definieren wir einfach zwei Button und einen Ausgabebereich:
|
1 2 3 4 5 6 |
<div id="app"> <button v-on:click="bet('Schwarz')">Schwarz</button> <button v-on:click="bet('Rot')">Rot</button> <br><br> <span v-html="message"></span> </div> |
Das besondere hier dran sind die besonderen Vue-Befehle. Mittels v-on:click definieren wir eine Vue-JavaScript-Funktion die beim Click auf den Button ausgeführt werden soll. Hierbei wird die Funktion bet aufgerufen und der Parameter Schwarz oder Rot übergeben.
Das <span v-html="message"></span> Element gibt die Variable message aus. Diese befüllen wir mit der Ausgabe.
Anschließend definieren wir unsere Vue.js-App
|
1 2 3 4 5 6 |
<script> var app = new Vue({ el: '#app', /// }) </script> |
Wir definieren das Ziel für die App (das Element mit der Id 'app').
Diesem Vue-Objekt können wir ein mal Variablen (data) übergeben und zum anderen methods, also Funktionen, die aufgerufen werden sollen.
Die Funktion bet ist eine einfache Funktion, die eine Runde am Roulette-Tisch startet. Es wird ein Timer gestartet, der nach 3 Sekunden zufällig eine Zahl zwischen 0 ... 36 zieht. Danach wird die Farbe der Zahl bestimmt. Zum Abschluss wird dann noch ausgegeben, ob der Benutzer gewonnen oder verloren hat.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
methods: { bet: function (farbe) { this.message = 'Sie haben gewählt: '+farbe; this.message += '<br/> Das Rad wird gedreht...'; setTimeout(function() { var zahl = Math.floor(Math.random()*37); //Zahl zwischen 0 ... 36) var zahlFarbe; if(zahl == 0) { zahlFarbe = "Grün"; } else if(zahl % 2 == 0) { zahlFarbe = "Schwarz" } else { zahlFarbe = "Rot" } this.message += "<br /> Es wurde entschieden: "+zahl+" - "+zahlFarbe; if(zahlFarbe == farbe) { this.message += "<br /> Glückwunsch, Sie haben gewonnen!"; } else { this.message += "<br /> Schade, dies mal hat es nicht geklappt"; } }.bind(this), 3000); } } |
Komplexere Vue.js-Anwendungen
Dies ist ein sehr sehr einfaches Beispiel wie sich Vue.js verwenden lässt. Aber Vue.js ist nicht nur für einfache Sachen gut geeignet, auch äußerst komplexe Webanwendungen lassen sich mit Vue realisieren. Wie das geht würde hier den Rahmen sprengen, daher verweise ich auf die sehr gute Dokumentation von Vue.
Autor: Nils Reimers