This page (revision-2) was last changed on 20-Jul-2020 16:04 by Dieter Käppel

This page was created on 20-Jul-2020 15:45 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
2 20-Jul-2020 16:04 2 KB Dieter Käppel to previous
1 20-Jul-2020 15:45 564 bytes Dieter Käppel to last

Page References

Incoming links Outgoing links

Version management

Difference between version and

At line 15 added 20 lines
!!!Implizite Features
Folgende Features sind implizit erhalten und brauchen keine zusätzliche Anweisungen im HTML/JS-Code um wirksam zu werden:
* __Component Style Class:__ Generieren von HTML-Class Attributen mit dem Namen der Vue-Komponente. Da Vue-Komponenten automatisch durch ihr Template ersetzt werden, kann kein CSS-Style mehr angebracht werden. Die generierten Style-Klassen helfen beim anwenden traditioneller Styles.
!!!Component Functions
Zusätzliche Funktionen für Vue Komponenten:
* __$propagate:__ Diese Direktive ist ähnlich wie $emit, allerdings propagiert der emittierte Event im DOM-Tree nach oben analog zu nativen DOM-Events.
* __$rendered:__ Ähnlich wie $nextTick, allerdings erfolgt der Aufruf des Callback erst, wenn der Browser mit dem Rendern fertig ist.
!!!Vue Direktiven
Zusätzliche Direktiven:
* __v-mounted:__ Mit <vue-dialog v-mounted="onDialogRendered"> kann ein Callback einer Child-Komponente installiert werden. Child-Komponente können möglicherweise asynchron gerendert werden, weshalb der mounted-Aufruf in der eigenen Komponente zu früh sein kann um bestimmte Aktionen durchzuführen.
* __v-class:__ Dynamisches Style-Class Binding das auch Mehrfach-Bindings zulässt. Die Direktive kann in zwei Varianten angewendet werden: 1. als dynamisches Binding v-class="<variable>". Damit wird die jeweils vorherige Style-Class entfernt und die neue hinzugefügt. Damit können leicht dynamische Icons, Severities etc. gebunden werden. 2. v-class:<name>="<enabled>" also z.B. v-class:ui-state-disabled="value == 0". Damit können Style-Classes in Abhängigkeit von Bedingungen ein- und ausgeschaltet werden. Vue Direktiven können innerhalb eines Tags grundsätzlich mehrfach verwendet werden.
* __v-focus:__ Der Fokus kann durch eine Boolean-Bedingung gesetzt werden, z.B. <input type="text" v-focus="index == 0">
* __v-scroll:__ Ähnlich wie bei v-focus kann durch eine boolesche Bedingung zu einem HTML-Tag gescrollt werden. Gescrollt werden dabei alle Parent-Elemente die scrollbar sind.
* __v-pan:__ Ermöglicht Mouse-Panning einer Elements das scrollable ist.