Vue.js kurz & gut (eBook)

Lars Peterke (Autor)

eBook Download: EPUB

2019 | 1. Auflage
216 Seiten
O'Reilly Verlag
978-3-96010-247-2 (ISBN)

Infos

Das Open-Source-Projekt Vue.js hat sich zu einem der populärsten JavaScript-Frameworks für das Erstellen von Benutzeroberflächen entwickelt. Der Kern von Vue.js konzentriert sich auf den View-Layer einer Webanwendung und ist daher besonders performant und schlank. Durch zahlreiche Erweiterungen kann Vue.js aber auch als vollumfängliches Web Application Framework für die Entwicklung komplexer Single-Page-Anwendungen genutzt werden. Mit diesem Buch erhalten Entwickler schnell einen Überblick über den Funktionsumfang von Vue.js. Es behandelt unter anderem die Grundlagen von Vue.js, Vue Components sowie alle Aspekte der Vue-API. Das Taschenbuch deckt kompakt viele Themen ab, die für Entwickler relevant sind, wie die Umsetzung komplexerer Vue-Projekte mit Vue CLI, Single File Components und Übergangseffekte. Hinweise zu zusätzlichen Tools, Paketen und Ressourcen sowie Lösungsansätze für gängige Probleme und Szenarien unterstützen bei der täglichen Entwicklungsarbeit mit Vue.js.

Lars Peterke ist hauptberuflicher Software-Entwickler aus Bremen. Bei der Arbeit konzentriert er sich auf die Fullstack-Entwicklung von Webapplikationen, privat beschäftigt er sich mit Journalismus im Gaming-Sektor und anderen Dingen, die er unter lpeterke.de dokumentiert.

Textauszug

KAPITEL 5

Klassen und Styles verknüpfen

Mindestens genauso wichtig wie das Rendering von Daten in einem Template ist die dynamische Anpassung von Klassen oder Styles für ein HTML-Element basierend auf den Daten der Vue-Instanz. Da es sich bei class und style um herkömmliche HTML-Attribute handelt, kann mit v-bind eine Verknüpfung mit den Daten realisiert und so etwa ein String mit Klassennamen erzeugt werden.

Damit das nicht zu mühselig wird, bietet Vue für diese zwei Attribute einige Zusatzfunktionen an, mit denen auch Arrays oder ganze Objekte innerhalb von v-bind ausgewertet werden können, um die Klassen oder Styles für ein HTML-Element zu rendern.

CSS-Klassen verknüpfen

Vue stellt verschiedene syntaktische Varianten bereit, um CSS-Klassen basierend auf den Daten der Vue-Instanz an ein Element zu knüpfen.

Objektsyntax

Es kann ein Objekt an v-bind:class übergeben werden, um dynamisch zwischen verschiedenen Klassen zu wechseln:

<div id="app">

<div v-bind:class="{ active: isActive }"></div>

</div>

var vm = new Vue({

el: '#app',

data: {

isActive: true

}

})

Mit diesem Beispiel wird die Anwesenheit der CSS-Klasse active vom Ergebnis der booleschen Prüfung des Datenattributs isActive abhängig gemacht. Ist isActive also true, wird die CSS-Klasse active in das Attribut class an das HTML-Element angefügt. Dieses Beispiel lässt sich beliebig erweitern, indem einfach weitere Attribute an das Objekt angefügt werden:

<div id="app">

<div class="static"

v-bind:class="{ active: isActive,

'text-danger': hasError }">

</div>

</div>

var vm = new Vue({

el: '#app',

data: {

isActive: true,

hasError: false

}

})

Das erzeugte HTML-Markup des Templates sähe wie folgt aus:

<div class="static active"></div>

Wie dieses Beispiel zeigt, kann v-bind:class auch ohne Probleme in Kombination mit einem normalen class-Attribut verwendet werden. Vue führt beim Rendern des Templates einfach beide Attribute zusammen. Sobald sich nun der Wert der Datenattribute isActive oder hasError ändert, wird Vue auch das Template aktualisieren.

Das Klassenobjekt muss übrigens nicht zwingend als Ausdruck unter v-bind:class deklariert werden. Stattdessen kann auch einfach ein Objekt aus dem Datenobjekt der Vue-Instanz übergeben werden:

<div id="app">

<div v-bind:class="classObject"></div>

</div>

var vm = new Vue({

el: '#app',

data: {

classObject: {

active: true,

'text-danger': false

}

}

})

Anstelle eines Datenobjekts lässt sich ebenfalls eine Computed Property verwenden:

<div id="app">

<div v-bind:class="classObject"></div>

</div>

var vm = new Vue({

el: '#app',

data: {

isActive: true,

errorType: 'fatal'

},

computed: {

classObject: function() {

return {

active: this.isActive,

'text-danger': this.errorType === 'fatal'

}

}

}

})

Array-Syntax

Auch Arrays können an v-bind:class übergeben werden:

<div id="app">

<div v-bind:class="[actClass, errClass]"></div>

</div>

var vm = new Vue({

el: '#app',

data: {

actClass: 'active',

errClass: 'text-danger'

})

Dieses Beispiel erzeugt die folgende Ausgabe:

<div class="active text-danger"></div>

Soll eine Klasse des Arrays je nach Zustand der Daten ausgetauscht werden, kann dies über einen ternären Ausdruck (If-Shorthand) erreicht werden:

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

</div>

Hier wird die Klasse errorClass immer ausgegeben. activeClass erscheint nur, wenn isActive den Wert true zurückliefert. Falls mehrere ternäre Ausdrücke verwendet werden, kann es jedoch schnell unübersichtlich werden. Daher lassen sich auch Objekte innerhalb von Arrays nutzen:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

Mit Components

Benutzt man das Attribut class bei einer Vue-Component, werden die CSS-Klassen an das Root-Element der Component angefügt. Dabei werden bereits bestehende CSS-Klassen nicht überschrieben. Auch wenn Vue-Components bislang noch nicht besprochen wurden, sei an dieser Stelle kurz eine sehr simple Vue-Component deklariert:

Vue.component('my-list', {

template: '<p class="foo bar">My List</p>'

})

Soll diese Component nun mit zusätzlichen CSS-Klassen genutzt werden, fügt man sie an anderer Stelle wie folgt in das HTML ein:

<my-list class="baz boo"></my-list>

Das von der Component erzeugte HTML lautet dann:

<p class="foo bar baz boo">My List</p>

Natürlich kann dieser Ansatz auch mit v-bind kombiniert werden:

<my-list v-bind:class="{ open: isOpen }"></my-list>

Dieses Beispiel würde das folgende HTML erzeugen, sofern das Datenattribut isOpen den Wert true zurückliefert:

<p class="foo bar open">My List</p>

Styles verknüpfen

Bei der Verknüpfung von Styles kümmert sich Vue automatisch um nötige Präfixe für bestimmte CSS-Eigenschaften wie transform und fügt je nach Browser Präfixe wie -webkit- oder -moz- selbstständig an.

Objektsyntax

Auch bei der Verknüpfung von Styles kann ein JavaScript-Objekt übergeben werden:

<div id="app">

<div v-bind:style="{ color: activeColor }"></div>

</div>

var vm = new Vue({

el: '#app',

data: {

activeColor: 'red',

})

Attribute können in Camel Case oder Kebab Case mit Hochkommata geschrieben werden. Aus font-size wird somit also entweder fontSize oder 'font-size':

v-bind:style="{ fontSize: titleSize + 'px' }"

Um das Template übersichtlich zu halten, ist es sinnvoll, ein Objekt (oder eine Computed Property) an v-bind:style zu übergeben:

<div id="app">

<div v-bind:style="styleObject"></div>

</div>

var vm = new Vue({

el:...

Produkt-Details

• Erscheint lt. Verlag: 8.2.2019
• Verlagsort: Heidelberg
• Sprache: deutsch
• Themenwelt: Mathematik / Informatik ► Informatik ► Programmiersprachen / -werkzeuge
• Schlagworte: Benutzeroberfläche • JavaScript-Framework • Open Source • Single File Components • Single-Page-Anwendung • Transitions • Vue CLI • Web Application Framework
• ISBN-10: 3-96010-247-X / 396010247X
• ISBN-13: 978-3-96010-247-2 / 9783960102472