Tutorial Teil 2: Data-Binding, Events, Routing für das Webframework Vue.js
Im zweiten Teil des Tutorials zum Webframework Vue.js geht es um Details zu den Grundlagen, um Events, das Reactivity-Modell sowie das Routing.
- Dr. Fabian Deitelhoff
Der erste Teil des Vue-Tutorials beschäftigte sich mit Kontrollstrukturen und Komponenenten zum Strukturieren von Aufgaben und Code. Hier setzt der zweite Teil an: Er erklärt Komponenten im Detail und erläutert das Data-Binding näher. Außerdem geht es um Eingabeverarbeitung und Validierung von Benutzereingaben, Custom Events sowie das Routing-System. Mit diesen Kenntnissen lässt sich Vue in großen und komplexen Projekten einsetzen: Ohne eigene Komponenten gibt es keine Struktur im Projekt, Custom Events sind für die Kommunikation wichtig, und Wissen über das Data-Binding und das Reactivity-Modell hilft, nervige Fehler zu vermeiden.
Zum Binden von Daten an DOM-Objekte nutzt Vue die Template-Syntax, die auf HTML basiert. Sie verbindet DOM-Objekte deklarativ mit Daten der Vue-Instanz. Beim Rendern wandelt Vue Templates in Funktionen. Dadurch kann das Framework entscheiden, welche Komponenten es neu rendern muss und welche DOM-Manipulationen daraus resultieren müssen. Diese Render-Funktionen können Entwickler auch direkt implementieren, wenn sie die Konzepte des virtuellen DOM kennen.
Anwendungsdaten an DOM-Elemente binden
Vue arbeitet auch beim Data-Binding mit Direktiven – spezielle Attribute, die mit v- beginnen und als Argument meist eine JavaScript-Anweisung erwarten. Aufgabe einer Direktive ist es, Änderungen auf das DOM anzuwenden, wenn sich der Wert der JavaScript-Anweisung ändert. So lassen sich Seiteneffekte im DOM abbilden.
Immer mehr Wissen. Das digitale Abo für IT und Technik.
Kabelloser Mähroboter Mammotion Luba 2 AWD im Test
Kühlen mit der Wärmepumpe: Wenn die Fußbodenheizung Kälte liefert
BMW iX1 eDrive20 im Test: Management von Erwartungen
Wie Klimageräte funktionieren und was man über die Installation wissen sollte
Pixel-Lampe mit WLED selbst bauen