Sebastian Springer MaibornWolff

Bei Vue.js handelt es sich um ein recht solides Framework, bei dem auf jeden Fall ein intensiverer Blick lohnt.

Im April 2016 hat Evan You den Grundstein für ein neues JavaScript-Framework gelegt. „Schon wieder ein neues Framework“, werden Sie sich jetzt vielleicht denken. Soweit ist das ja nichts Besonderes. Bemerkenswert ist jedoch, dass Vue.js innerhalb seiner kurzen Lebenszeit schon so viel Aufmerksamkeit auf sich gezogen hat und es sich schon deshalb lohnt, einmal einen Blick auf das Framework und seine Konzepte zu werfen.

Einige handeln Vue.js als Nachfolger von AngularJS, wobei ich aktuell noch nicht so weit gehen würde. Momentan fühlt sich Vue.js eher wie der kleine Bruder von AngularJS an. Am besten bilden Sie sich auf den folgenden Seiten selbst eine Meinung zu diesem Framework und bauen vielleicht sogar Ihre erste kleine Applikation damit.

Doch zunächst einmal die wirklich wichtigen Dinge: die Aussprache. Vue wird /vjuː/ gesprochen, also wie das englische „view“. Nachdem das nun geklärt ist, stellen sich einige grundlegende Fragen: Was ist dieses Framework überhaupt, was macht es aus und warum kann es sinnvoll sein, sich damit zu beschäftigen? Vue.js ist etwa zwischen AngularJS und React anzusiedeln, ist dabei aber leichtgewichtiger und macht weniger Vorgaben als AngularJS, verfolgt allerdings nicht so radikale Ansätze wie React mit seiner JSX-Syntax. Falls Sie sich schon einmal mit einem der beiden genannten Frameworks beschäftigt haben, wird Ihnen der Einstieg in Vue.js nicht ganz so schwer fallen, da Ihnen einige bekannte Konzepte begegnen werden.

Der Aufbau

Im Kern verfolgt Vue.js einen ähnlichen Ansatz wie React und AngularJS. Eine Applikation setzt sich aus einem Baum von Komponenten zusammen. Jede dieser Komponenten ist in sich geschlossen und so gut wie möglich von den übrigen Komponenten entkoppelt. Die Kommunikation zwischen ihnen erfolgt über definierte Schnittstellen. Zum Aufbau des UI wird standardmäßig HTML als Template-Sprache benutzt und um benutzerdefinierte Tags und Attribute erweitert. Über diese Elemente wird dann beispielsweise die Datenbindung und das Eventhandling realisiert.

Vue.js konzentriert sich auf den View-Layer einer Webapplikation und stellt aus diesem Grund gerade hier zahlreiche Hilfsmittel im Umgang mit Styling und Formularen zur Verfügung. Alle weiteren Funktionen sind nicht Bestandteil des Kerns von Vue.js, sondern in eigenständige Plug-ins ausgelagert, die je nach Bedarf heruntergeladen und in die Applikation eingebunden werden können. Ein recht häufig verwendetes Beispiel ist der Vue-Router, auf den wir später noch zu sprechen kommen werden. Weitere hilfreiche Plug-ins sind beispielsweise vue-resource, ein HTTP-Client für Vue.js, oder Vuex, ein Mittel zur Verwaltung des Applikationsstatus. Auch diese Plug-ins werden Sie im weiteren Verlauf dieses Artikels noch in ihrer praktischen Anwendung kennen lernen.

Den vollständigen Artikel lesen Sie in der Ausgabe:

PHP Magazin 2.17 - "Vue.js"

Alle Infos zum Heft
579758741Vue.js: Das Framework im Überblick
X
- Gib Deinen Standort ein -
- or -