Mobile-Menu

Das JavaScript-Framework Vue.js, Teil 3 DOM-Manipulation mit Vue-Direktiven

Von Dr. Dirk Koller

Anbieter zum Thema

PresseBox - unn | UNITED NEWS NETWORK GmbH

Im dritten Teil der Vue-Reihe dreht sich alles um Direktiven. Dabei handelt es sich um spezielle Kennzeichnungen im HTML-Code, die es ermöglichen, mithilfe von JavaScript-Ausdrücken die Erzeugung von DOM-Elementen zu beeinflussen.

In der API-Referenz von Vue.js findet sich eine Übersicht über die Direktiven.
In der API-Referenz von Vue.js findet sich eine Übersicht über die Direktiven.
(Bild: vuejs.org)

Die Beschreibung einer Direktive scheint deutlich komplizierter, als das Thema wirklich ist. Mit Direktiven ist es zum Beispiel möglich, dynamische Inhalte anzuzeigen oder Elemente unter bestimmten Bedingungen wegzulassen. Auch Schleifen lassen sich damit leicht realisieren.

Wer aus der Java-Welt kommt, kennt vielleicht noch die JSP-Tags, die einem ähnlichen Zweck dienten. Die meisten Vue-Direktiven erkennt man an dem Prefix v-, es gibt allerdings einige Abkürzungen.

Data-Bindings: v-bind, v-text, v-html

Beim Data-Binding werden Daten aus einer Datenquelle mit einem konsumierenden Objekt verbunden. Wenn sich die Quelle ändert, wird diese Änderung im angebundenen Objekt automatisch nachgezogen. Bei Vue ist diese Datenquelle meist das View-Model, also das Options-Objekt mit den in data() hinterlegten Eigenschaften:

data() {
  return {
    targetURL: 'https://www.dev-insider.de',
    firstname: 'Max'
  };
}

Mit der Direktive v-bind lassen sich daran Attribute von HTML-Elementen binden. Ein gutes Beispiel ist einfacher HTML-Link. In diesem ist href ist ein Attribut des Anchor-Tags, mit dem das Linkziel angegeben wird. Gebunden an eine Vue-Eigenschaft im Modell sieht das folgendermaßen aus:

<a v-bind:href="targetURL">Link</a>

Ein weiteres Beispiel für ein Attribute-Binding ist das Image-Element mit dem Attribut src:

<img v-bind:src="imageURL"/>

Die Direktive v-bind lässt sich mit dem Doppelpunkt vor dem Attribut abkürzen. Der folgende Code funktioniert also genauso:

<img :src="imageURL"/>

Der Textinhalt von Elementen wie h1 oder p lässt sich mit v-text anbinden. Im folgenden Beispiel wird der Wert der Eigenschaft firstname aus der data-Funktion als Überschrift der Kategorie 1 ausgegeben:

<h1 v-text="firstname"></h1>

Wenn der Wert der Variablen in der Ausgabe von Text umgeben sein soll, empfiehlt sich stattdessen die Text-Interpolation mit der Mustache-Syntax. Sie wurde bereits in einem vorherigen Beitrag kurz vorgestellt:

<h1>Hallo {{ firstname }}</h1>

Soll nicht nur Text, sondern auch Markup dynamisch injiziert werden soll geht das mit der v-html-Direktive:

<div v-html="'<h1>Hello World</h1>'"></div>

Wegen der Gefahr von Cross-Site Scripting Attacken ist die Direktive allerdings mit Vorsicht zu genießen. Vue.js unternimmt zwar ein paar Anstrengungen wie zum Beispiel das Escapen von Strings um Script-Injection zu vermeiden, es sollten trotzdem prinzipiell keine Benutzereingaben injiziert werden.

Form-Input-Binding: v-model

Eine weitere Direktive, mit der sich Daten aus dem View-Model anbinden lassen, ist die Direktive v-model. Sie kommt bei Eingabekomponenten wie Input, Textarea oder Select zum Einsatz und funktioniert in beide Richtungen. Daten aus dem Modell werden in dem HTML-Element angezeigt und Eingaben in den Komponenten werden ins Model übertragen. Das nennt sich dann 2-Way-Data Binding:

<input v-model="firstname" />

Event-Binding: v-on

Die v-on-Direktive verbindet ein Element mit einem Event-Listener. Typisches Beispiel ist ein Button der bei Betätigung ein Click-Event auslöst:

<button v-on:click="changeName()">Klick</button>methods: {
  changeName() {
    this.firstname = "Moritz";
  },
},

Aber natürlich lässt sich die Direktive auch für andere Ereignisse wie beispielweise einem MouseOver-Event anwenden:

<h1 v-on:mouseOver="changeMessage()">{{message}}</h1>

Häufig findet man auch die Kurzform für die Direktive, das @-Symbol, das den Code etwas lesbarer macht:

<h1 @mouseOver="changeMessage()">{{message}}</h1>

Bedingungen: v-if, v-else, v-else-if und v-show

Mit v-if lassen sich Bedingungen realisieren, ein Block wird im DOM nur gerendert, wenn die Bedingung true ist:

<span v-if="showLastname">{{ person.lastname }}</span>

Selbstverständlich lässt sich auch ein else-Zweig formulieren, der ausgeführt wird, wenn die Bedingung nicht zutrifft:

<span v-if="showLastname">{{ person.lastname }}</span>
<span v-else>Nachname soll nicht angezeigt werden!</span>

Schließlich gibt es für den Fall, dass mehrere Bedingungen überprüft werden sollen, noch die else-if-Direktive:

<div v-if="code === 'DE'">
  Deutschland
</div>
<div v-else-if="code === 'AT'">
  Österreich
</div>
<div v-else-if="code === 'CH'">
  Schweiz
</div>
<div v-else>
  Außerhalb DACH
</div>

Die Direktive v-show lässt sich ähnlich verwenden wie v-if, allerdings wird das betroffene Element auf jeden Fall im DOM gerendert. Wenn sich der Ausdruck zu false berechnet, wird lediglich die CSS-Property display auf none gesetzt, so dass das Element nicht sichtbar ist:

<span v-show="showLastname">{{ person.lastname }}</span>

Schleifen: v-for

Listen lassen sich mit der v-for-Direktive erstellen. Dabei handelt es sich um eine foreach-Schleife wie sie aus vielen Programmiersprachen bekannt ist. v-for zählt die Elemente einer Sammlung (hier persons) auf und führt den Rumpf für jedes Element der Sammlung (hier person) aus. Damit Vue die verschiedenen Objekte sauber auseinanderhalten kann, wird ein Unique-Key (person.firstname) angegeben:

<div id="app">
  <ul>
    <li v-for="person in persons" :key="person.firstname">
      {{person.lastname}}, {{ person.firstname }}
    </li>
  </ul>
</div>data() {
  return {
    persons: [
      { firstname: "Max", lastname: "Maier" },
      { firstname: "Petra", lastname: "Peterweil" },
      { firstname: "Willi", lastname: "Wisser" },
    ],
  };
}

Die gängigsten Direktiven sind damit vorgestellt. Im weiteren Verlauf der Reihe wird sich noch der eine oder andere Exot bei Spezialthemen wie zum Beispiel den Slots dazu gesellen. Eine komplette Übersicht über alle Direktiven findet sich auf der Vue.org-Webseite.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Softwareentwicklung und DevOps

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung.

Aufklappen für Details zu Ihrer Einwilligung

(ID:47963918)

Weiterführende Inhalte