Einführung in Vue.js

Einführung in Vuejs Teil 1: Hello World und Datenbindung

Rathes Sachchithananthan — 04.Sep.2016
in Web

In jüngster Zeit sind in der Welt der Frontend-Entwicklung JavaScript-Frameworks voll im Trend, so auch Vuejs. Diese Reihe dient als kleine Hilfe für den Einstieg in Vuejs. Im ersten Teil gehe ich ein wenig auf allgemeine Themen ein und starten dann mit einem einfachen „Hello World“ und den Konzept der Datenbindung (eng. data binding).

Schaut man sich heutzutage in der Frontend-Entwicklung um, dann arbeitet fast jeder mit einem Framework. Bis auf einige wenige, die noch verbissen jQuery bei der Entwicklung von modernen User Interfaces einsetzen, haben sich die meisten Entwickler für ein Framework entschieden. Ganz zu Beginn der Framework-Zeit wählte man zwischen Backbone.js, AngularJS oder Ember:js. Mittlerweile hat sich der Markt weiterentwickelt. Aktuell benutzen die meisten entweder Angular2, React oder halt auch Vuejs.

Ich selbst habe mich in vielen dieser Frameworks eingearbeitet, habe mich bisher noch für keines dieser entschieden. AngularJS in der ersten Version habe ich abgehakt, doch die neue Version sieht schon recht interessant an. Gleichzeitig finde ich den Flux-Architektur, den Facebook zusammen mit React geliefert hat, auch sehr interessant und gerade im Bereich der Wartung von Code sehr sinnvoll. So habe ich mich auch an React in Zusammenhang mich Redux versucht. Und zu guter Letzt bin ich gerade dabei mich an Vuejs zu versuchen.

Und während ich dabei bin, mir selbst das Wissen anzueignen, werde ich mein Erlerntes auch direkt mit dir teilen, sodass du die Möglichkeit hast, zusammen mit mir zu lernen. Wenn du Fragen hast, dann kannst du diese immer unter dem Beitrag stellen und falls ich mal nicht direkt weiterwissen sollte, dann ist es ein Ansporn mich noch tiefer mit der Materie zu beschäftigen.

Ok, so viel zur Vorgeschichte. Jetzt starten wir mit Vuejs.

Einrichtung und Download

Für die Einführung in Vuejs werde ich nichts komplexes einrichten. Stattdessen einfach Vuejs von deren Webseite herunterladen und dann einfach als Skript-Tag einbinden. Wenn du etwas größeres starten willst, dann kannst du natürlich deinen eigenen Workflow einrichten. Ich arbeite viel mit Gulp, aber du kannst natürlich auch Grunt oder Webpack einsetzen. Wie gesagt, für den Anfang reicht es, wenn du Vuejs einfach herunterlädst und ganz normal als JavaScript Datei einbindest.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello World!</title>
</head>
<body>
<script src="js/vue.min.js"></script>
</body>
</html>

Hello World!

Im nächsten Schritt müssen wir einen Container festlegen, in dem Vuejs operieren soll. Du kannst dafür den Body-Tag an sich benutzen, aber ich rate immer einen eigenen Container dafür zu verwenden. Wir legen also ein einfaches <div id="app"></div>, in welchem nun alles reinkommt, was mit der App in Verbindung stehen soll.

Nun müssen wir eine Instanz von Vue anlegen und festlegen, dass der zuvor angelegte Container zu dieser Instanz gehört. Dies erledigen wir ganz einfach über folgenden Code:

new Vue({
  el: '#app'
});

Nun haben wir eine Instanz von Vue erstellt und haben gleichzeitig den entsprechenden Container angelegt. Nun wollen wir in diesem Container unsere „Hello World!“ Nachricht anzeigen lassen. Im ganz klassischen HTML würden wir also eine h1-Überschrift anlegen und diese mit unserer Nachricht befüllen. Wollten wir die ändern, würden wir via jQuery das Element im DOM suchen und den Inhalt ändern. In Vuejs läuft das etwas anders.

In Vuejs können wir innerhalb unseres Containers mit Template-Tags arbeiten und die Daten für das Template-Tag aus der Vue-Instanz aus liefern. Wie das aussieht, siehst du im folgenden Beispiel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello World!</title>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>
    <script src="js/vue.min.js"></script>
</body>
</html>

Wie du siehst, haben wir in doppelten geschweiften Klammern das Wort „message“ ausgegeben. Du erkennst sicherlich, was gemacht wird. Wir geben an dieser Stelle den Wert der Variable message aus. Ganz klassisch wie man es von anderen Template-Engines her auch kennt.

Diese Variable muss nur irgendwo festgelegt werden. Dafür gibt es die Vue-Instanz. Dort müssen wir festlegen, dass es die Variable message gibt und wie der Wert dieser sein soll.

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
});

Die Vue-Instanz wird also um ein Objekt mit dem Namen „data“ erweitert, in der wir die Variablen definieren können. In unserem Fall haben wir also die Variable message mit dem Wert „Hello World!“ befüllt. Rufen wir die Seite also im Browser auf, dann siehst du wie erwartet den Inhalt unserer Variable innerhalb der Überschrift, die wir im HTML definiert haben.

Datenbindung in Vuejs

Wir haben nun also ein kleines Projekt geschaffen, dass eine Variable in einer View ausgeben kann. Das ist aber nicht alles, sondern Vuejs kann noch einiges mehr. Eines der Hauptmerkmale bei Vuejs ist die Reaktivität, das aus der Datenbindung (im Englischen data binding) resultiert. Aber was bedeutet das?

Das bedeutet, dass, wenn die Variable verändert wird, gleichzeitig die View der Änderung entsprechend angepasst wird. In normalem JavaScript oder jQuery, würden bei der Änderung normalerweise die Stelle im DOM suchen und die Änderung der Variable manuell auch in der View ändern. Diesen Aspekt nimmt uns Vuejs komplett ab.

Schauen wir uns das doch mal praktisch an. Dazu fügen wir ein Input-Feld zu unserer View hinzu: <input type="text" v-model:"message">. Hierbei nennt man das v-model Attribut eine Direktive und in diesem Fall verbinden wir den Wert des Inputs mit der Variable message aus unserem Datenmodell. Und siehe da: Wenn wir unsere Änderung im Browser eingeben sehen wir, dass das Input-Feld direkt mit „Hello World!“ befüllt ist, ohne, dass wir etwas als value definiert haben. Wir haben nämlich an unser Input-Feld mit der Direktive v-model das Datenkonstrukt „message“ gebunden. Der Wert des Input-Feldes entspricht immer dem Wert, welchen wir in unserer View-Instanz definiert haben.

Die Datenbindung geht aber einen Schritt weiter. In Vuejs sind die Daten bidirektional gebunden. Ändere doch mal den Wert im Input-Feld und du wirst sehen, dass sich deine Überschrift auch direkt mit verändert. Das liegt daran, dass nicht nur das Input-Feld an das Datenmodell gebunden ist, sondern das Datenmodell auch an die View. In unserem Fall ändern wir den Wert des Input-Feldes und dadurch ändert sich auch das data.message unserer Vue-Instanz und das wiederum hat zur Folge, dass sich unsere Variablenausgabe bei der Überschrift ändert. Alles automatisch, ohne, dass wir uns darum kümmern müssen. Cool nicht?

Zusammenfassung

Im ersten Teil hast du also gelernt wie Datenbindung in Vuejs funktioniert. Dieses Konzept ermöglicht uns die Entwicklung von Interfaces um einiges zu beschleunigen, da wir einiges an Code nicht mehr schreiben müssen. Nämlich jenen Code um den DOM zu durchlaufen und entsprechende Stellen upzudaten, wenn sich Daten ändern. Das macht Vuejs automatisch. Im nächsten Teil lernen wir eine weitere Direktive kennen.

Hier ist der Code wie er bei mir zum Ende des Artikels aussieht. Wie gesagt, falls du Fragen hast, melde dich gerne. Falls du Fehler oder andere Anmerkungen hast, melde dich ebenfalls, da ich mich zum Zeitpunkt des Schreibens dieses Artikels ebenfalls in Vuejs einarbeite und für jeden Tipp dankbar bin!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello World!</title>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input type="text" v-model:"message">
    </div>
    <script src="js/vue.min.js"></script>
    <script type="text/JavaScript">
        new Vue({
          el: '#app',
          data: {
            message: 'Hello World!'
          }
        });
    </script>
</body>
</html>
Rathes Sachchithananthan

Rathes Sachchithananthan

Hi, ich bin Rathes. Gründer dieses Blogs. Darüber hinaus habe ich Aheenam gegründet, eine Agentur für digitale Lösungen. Dort konzipiere und entwickle ich die digitale Weiterentwicklung meiner Kunden. Ich brenne für das Thema "Tamilen und Tamil Eelam" und bin ein Microsoft-Fanboy. Du findest mich auch auf diversen sozialen Netzwerken

Web und die Welt — Gott kann auch mal drin vorkommen

Ein Blog über das Web und die Welt. Wir schreiben über viele interessante Themen wie z.B. das Web, Tamil Eelam oder über Fotografie. Vielleicht ist auch was für dich dabei?