mk-prg-net \ js \vue \intro

MVVM mit VUE

Vue ist eine JS- Bibliothek zur Implementierung von UI's nach dem MVVM- Pattern. Doku:

Bindungen definieren

Interpolationen

Unter Interpolationen bezeichen Veränderungen des Textes in der View durch spezielle Bindungsausdrücke, den sog. Double Curly Syntax {{...}}.

In den double Curlys werden JS- Ausdrücke geschrieben, welche Modelleigenschaften auswerten:

Die Anzahl der Punkte ist {{ maxPoints%2===0?"gerade": "ungerade" }}
Änderungen an der Modelleigenschaft maxPoints werden von Vue sofort in den Text der View eingepflegt.

Achtung: Die Daten aus den Modelleigenschaften werden als reiner Text eingebunden. HTML- Markup wird encodiert, wodurch die Tags als Klartext sichtbar werden und wirkungslos sind. Einbettung von HTML geht nur mit der v-html Direktive.

Direktiven

Direktiven sind erweiterte Attribute für Html Markup, die

binden. Diese Attribute beginnen mit dem Präfix v-

v-html=Modelleigenschaft
Bettet das HTML- Markup der Modelleigenschaft in das Element mit diesem Attribut ein.
v-model=Modelleigenschaft
Bindet ein Input- Element vom Typ Text oder Textarea an eine Modelleigenschaft
v-bind:Attributname=Modelleigenschaft
Bindet das Attribut eines HTML- Tags an eine Modelleigenschaft.
v-if=Modelleigenschaft
Rendert ein HTML- Element genau dann, wenn die Modelleigenschaft true liefert. Sonst wird das HTML- Element nicht gerendert.
v-on:event=Eventhandler aus methods
Bindet den Eventhandler aus Methods an das Event dieses Elements
{{ message }}

{{ message }}