Vue.js kurz & gut

Lars Peterke

• Verlag: O'Reilly
• Jahr: 2019
• ISBN drucken:
  9783960090922
• eBook-ISBN:
  9783960102472
• Auflage: 1
• Thema: Ciencia de la computación
• Thema: Programación en JavaScript

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.

TEIL III

Vue-API

Wenn Sie die ersten beiden Teile dieses Buchs verinnerlicht haben, kennen Sie bereits einen Großteil aller Funktionen von Vue und sind damit in der Lage, an komplexeren Vue-Projekten mitzuwirken.

Dieser Teil des Buchs soll Ihnen dabei als Nachschlagewerk dienen. Er beschreibt alle Eigenschaften und Funktionen der Vue-Klasse sowie der Vue-Instanzen und geht auf alle Direktiven und Components ein, die Vue selbst bereitstellt.

Sie müssen nicht alles wissen. Aber zu wissen, wo es geschrieben steht, ist ein immenser Vorteil! Es ist in Ordnung, die folgenden Seiten zunächst nur zu überfliegen. Aber wenn Sie künftig vor einem Problem stehen und Ihnen die Lösung nicht sofort einfällt, werfen Sie doch mal einen Blick in diesen Teil des Buchs.

KAPITEL 17

Globale Konfiguration

Unter Vue.config befindet sich das globale Konfigurationsobjekt von Vue. Dabei können folgende Eigenschaften angepasst werden.

silent

Typ: Boolean

Standardwert: false

Mit Vue.config.silent = true können Log- und Warnmeldungen von Vue abgeschaltet werden.

optionMergeStrategies

Typ: { [key: string]: Function }

Standardwert: {}

Definiert eine Strategie zur Kombination eigener Optionsattribute:

Vue.config.optionMergeStrategies._my_option =

function (parentValue, childValue, vm) {

return childValue + 1

}

Die Callback-Funktion erhält den Wert der Option der übergeordneten und untergeordneten Instanz als ersten und zweiten Parameter sowie die Vue-Instanz für den aktuellen Kontext als dritten Parameter.

devtools

Typ: Boolean

Standardwert: true (false in Produktiv-Builds)

Mit Vue.config.devtools = true kann festgelegt werden, dass eine Inspektion der Anwendung mit den Vue Devtools erlaubt ist.

errorHandler

Typ: Function

Standardwert: undefined

Es kann ein Handler für nicht aufgefangene Fehler beim Rendering von Components definiert werden:

Vue.config.errorHandler = function (err, vm, info) {

...

}

Der Parameter info enthält Vue-spezifische Informationen über den Fehler. Ist keine Funktion definiert, wird console.error für das Logging genutzt. Der Handler greift auch bei Lifecycle-Funktionen und benutzerdefinierten Event-Handlern.

warnHandler

Typ: Function

Standardwert: undefined

Für Warnungen zur Laufzeit kann ein eigener Handler definiert werden:

Vue.config.warnHandler = function (msg, vm, trace) {

...

}

Der Parameter trace enthält die Component-Hierarchie. Der Handler wird bei Produktivanwendungen ignoriert.

ignoredElements

Typ: Array<string | RegExp>

Standardwert: []

Über dieses Array können benutzerdefinierte Elemente angegeben werden, die Vue ignorieren soll. Andernfalls würde Vue bei diesen Elementen den Fehler Unknown custom element erzeugen und vermuten, dass vergessen wurde, eine globale Component zu registrieren, oder dass ein Tippfehler vorliegt. Es lässt sich pro Eintrag im Array ein fester Name oder ein regulärer Ausdruck angeben:

Vue.config.ignoredElements = [

'my-component',

/^local-/

]

keyCodes

Ty...

Inhaltsverzeichnis

• Cover
• Titel
• Impressum
• Inhalt
• Vorwort
• Teil I: Vue-Grundlagen
• Teil II: Webentwicklung mit Vue
• Teil III: Vue-API
• Teil IV: Tägliches Arbeiten mit Vue
• Index
• Über den Autor