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

Bindungen von Viewelemente an die Modelleigenschaften
Eventhandler an Formcontrols

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