© istockphoto.com/Bluehousestudio
Vue.js im Überblick

Framework mit Ausblick


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 werden 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.

Die ersten Schritte

Bevor Sie sich gleich in eine kleine Vue.js-Applikation stürzen, lernen Sie zunächst die wichtigsten Kernkonzepte kennen. Die Grundlage einer jeden Vue.js-Applikation ist der Vue-Konstruktor. Dieses Konstrukt erfüllt gleich mehrere Aufgaben. Sie nutzen es beispielsweise, um Ihre Applikation zu starten. Hierfür erzeugen Sie mit dem new-Operator eine neue Instanz und übergeben dem Konstruktor ein Konfigurationsobjekt. Ein weiterer Zweck, den der Vue-Konstruktor erfüllt, ist die Registrierung von Elementen wie Komponenten und Filtern. Über einen Aufruf der component-Methode können Sie beispielsweise eine neue Komponente in Ihrer Applikation registrieren.

Sie können dem Konstruktor mit dem Konfigurationsobjekt eine Reihe von Eigenschaften übergeben. Im ersten Schritt sollten Sie zumindest die Eigenschaften el und template angeben. Mit der el-Eigenschaft geben Sie den Startpunkt Ihrer Applikation an – also das Element im DOM-Baum, das Ihre Applikation enthalten soll. Dabei können Sie jeden gültigen CSS-Selektor verwenden. Achten Sie darauf, dass es sich um einen möglichst einfachen und eindeutigen Selektor handelt. Im Idealfall verwenden Sie ein id-Attribut. Die template-Eigenschaft enthält eine HTML-Zeichenkette, die das el-Element ersetzt. Alternativ können Sie das Template auch in dem Element definieren, auf das Sie mit der el-Eigenschaft verweisen. Bei der Erzeugung Ihrer Templates sollten Sie darauf achten, dass diese nur einen Wurzelknoten aufweisen.

Neben diesen beiden Eigenschaften können Sie noch zahlreiche weitere Schlüssel-Werte-Paare übergeben. So definieren Sie beispielsweise über den data-Schlüssel die Eigenschaften der Instanz und mit methods die Methoden. Bei der Verwendung dieser Eigenschaften sollten Sie beachten, dass Vue.js hier die Aufgabe eines Proxys übernimmt und Sie nicht direkt auf die Daten und Methoden zugreifen lässt, sondern die Zugriffe abfängt und weiterleitet. Was das konkret bedeutet, sehen Sie in Listing 1.

Listing 1: Hello World

let app = new Vue({ el: '#myApp', data: { name: 'World' }, methods: { sayHello: function() { return 'Hello ' + this.name } } }); console.log('Property: ', app.name); console.log('Method: ', app.sayHello());

Der Proxy von Vue.js sorgt dafür, dass ein Zugriff auf app.name an das Objekt in der data-Eigenschaft des Konfigurationsobjekts weitergeleitet wird. Ähnliches gilt für einen Aufruf der sayHello-Methode auf der Vue-Instanz. Sie können jedoch nicht nur von außerhalb auf Ihr neues Vue-Objekt zugreifen, sondern die Eigenschaften und Methoden auch innerhalb dieses Objekts verwenden.

Vue.js schreibt sich auf die Fahne, ein Framework zur Erzeugung von Benutzerschnittstellen zu sein. Hier darf natürlich die Dynamik nicht zu kurz kommen. So können Sie in den Templates Ihrer Applikation auch auf die Daten Ihres Objekts zugreifen – diese Vorgehensweise ist auch als Interpolation bekannt. Die Anzeige erfolgt über doppelte geschweifte Klammern – eine Syntaxform, die schon aus Mustache, AngularJS und zahlreichen anderen Frameworks und Bibliotheken bekannt ist. Diese Schreibweise können Sie jedoch nur innerhalb von HTML-­Tags und nicht für Attributwerte verwenden. In diesem Fall greifen Sie auf die v-bind-Eigenschaft zurück. Die Schreibweise lautet hier v-bind, gefolgt von einem Doppelpunkt und dem Attributnamen. Vue.js verfügt zusätzlich zu dieser ausführlichen Variante auch über eine Kurzschreibweise, bei der Sie das v-bind weglassen können und nur einen Doppelpunkt vor dem Attributnamen angeben. Egal, für welche Version Sie sich entscheiden: Der Wert, den Sie diesem Konstrukt zuweisen, wird mit dem entsprechenden Gegenstück in der data-Eigenschaft verknüpft. Sowohl für die Interpolation als auch für den Zugriff auf dynamische Attributwerte gilt, dass die Anzeige aktualisiert wird, sobald sich die entsprechenden Werte ändern. Das können Sie ganz einfach testen, indem Sie die Entwicklerkonsole Ihres Browsers öffnen und über die Referenz Ihrer Applikation – im Fall des Beispiels ist das die Variable app – die angezeigte Eigenschaft manipulieren. Sobald Sie die Änderung durchgeführt haben...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang