Vue.js kurz & gut (eBook)
216 Seiten
O'Reilly Verlag
978-3-96010-247-2 (ISBN)
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.
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.
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:...
| 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 |
| Haben Sie eine Frage zum Produkt? |
EPUB (Wasserzeichen)Größe: 457 KB
DRM: Digitales Wasserzeichen
Dieses eBook enthält ein digitales Wasserzeichen und ist damit für Sie personalisiert. Bei einer missbräuchlichen Weitergabe des eBooks an Dritte ist eine Rückverfolgung an die Quelle möglich.
Dateiformat: EPUB (Electronic Publication)
EPUB ist ein offener Standard für eBooks und eignet sich besonders zur Darstellung von Belletristik und Sachbüchern. Der Fließtext wird dynamisch an die Display- und Schriftgröße angepasst. Auch für mobile Lesegeräte ist EPUB daher gut geeignet.
Systemvoraussetzungen:
PC/Mac: Mit einem PC oder Mac können Sie dieses eBook lesen. Sie benötigen dafür die kostenlose Software Adobe Digital Editions.
eReader: Dieses eBook kann mit (fast) allen eBook-Readern gelesen werden. Mit dem amazon-Kindle ist es aber nicht kompatibel.
Smartphone/Tablet: Egal ob Apple oder Android, dieses eBook können Sie lesen. Sie benötigen dafür eine kostenlose App.
Geräteliste und zusätzliche Hinweise
Buying eBooks from abroad
For tax law reasons we can sell eBooks just within Germany and Switzerland. Regrettably we cannot fulfill eBook-orders from other countries.
aus dem Bereich
