Einführung in Vue.js

Einführung in Vuejs Teil 2: Vue If und Vue Show

Rathes Sachchithananthan — 07.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 etwas kürzeren zweiten Teil geht es um zwei Direktiven: v-if und v-show.

Im ersten Teil dieser Reihe hatten wir bereits eine Direktive kennengelernt: v-model. Damit konnten wir den Wert eines Input-Feldes mit einer Variable unserer Vue-Instanz verknüpfen und so die bidirektionale Datenbindung ausnutzen. Dieses Beispiel erweitern wir nun um ein kleines Feature und führen so unsere zwei Direktiven ein.

Wir haben bereits folgendes Konstrukt aus dem ersten Teil:

<!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>

Dieses zeigt uns nun den Inhalt der Variable message in unserer Überschrift 1 an und wir können diese über das Input-Feld manipulieren. Wir ändern das Beispiel dahingehend um, dass wir nicht mehr die ganze Nachricht in der Variable halten, sondern nur noch einen Namen, zum Beispiel Max. Sodass quasi das Hello immer angezeigt wird und direkt daneben der Name.

Was müssen wir dazu machen? Nicht viel. Wir schreiben nur das Hello fest vor der Ausgabe der Variable ins h1-Element und nennen noch die Variable message in name um. Jetzt steht als Resultat halt immer „Hello Max“ oder „Hello Rathes“ oder allgemein „Hello {{ name }}“.

Soweit so gut. Was passiert, wenn wir in das Input-Feld nichts eingeben? Es also leer lassen? Dann steht dort einfach nur „Hello „. Das sieht ein bisschen traurig aus. Das wollen wir ändern. Immer wenn kein Name eingetragen ist, soll dort unsere alten Nachricht „Hello World“ erscheinen. Und das erreichen wir mit unseren neuen Direktiven.

Vue Direktive: v-if

Wir fügen dafür ein <span> direkt nach dem „Hello “ ein. Diesem geben wir ein v-if=“!name“ als Attribut und als Text unser Fallback „World“. Das ganze sieht das so aus

<h1>Hello <span v-if="!name">World!</span>{{ name }}</h1>

und die Vue-Instanz:

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

Testen wir nun unserem Code im Browser, sehen wir ganz klassisch unser „Hello World!“. Geben wir in unser Input-Feld aber einen Namen ein, wird statt der Welt nun der Name begrüßt.

Was passiert hier? Die v-if Direktive steuert nun, wann das „World!“ angezeigt wird und wann nicht. Wir haben nämlich festgelegt, dass immer dann das span eingebaut werden soll, wenn !name, also der Name nicht existiert. v-if ist also eine Art Kondition. Statt !name könnte da auch was ganz anderes stehen wie name !== ‚World‘. Immer dann wenn die Bedingung eintrifft, wird das Element angezeigt.

Vue Direktive: v-show

Ersetzen wir v-if mit der zweiten Direktive des Artikels v-show, dann sehen wir im Browser keine Veränderung. Optisch ändert sich da auch nichts, aber im Hintergrund gibt es da einen gewaltigen Unterschied. Während v-if je nach Zutreffen der Kondition das Element komplett aus dem DOM entfernt oder hinzufügt, fügt v-show einfach nur ein CSS display: none; hinzu.

Fazit

Mit diesem kleinen Teil haben wir nun Direktiven kennengelernt. Genaueres darüber werden wir später noch einmal aufnehmen, aber fürs erste wisst ihr wie man v-if und v-show benutzt. Sehr hilfreich sind diese Elemente, um Formularhinweise On-The-Fly anzuzeigen oder auszublenden. So könnt ihr mit v-show sicherstellen, dass die Hinweise wegen zu kurzem Username oder zu kurzem Passwort angezeigt werden und mit v-if sogar auch sicherstellen, dass der Submit-Button erst sichtbar wird, wenn die richtigen Inhalte im Formular stehen. Und das mit nur wenigen Zeichen an Code.

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?