Vue JQuery ist ein Javascript für die Integration von JQuery, Vue Direktiven und allgemeinen Hilfsfunktionen.
Einbindung#
ReactorJS ist momentan Beispiel des Projekts Vue Resource und kann im Intersult Nexus
downgeloadet werden.
Das Skript unterstützt RequireJS, das Einbinden erfolgt daher wie folgt:
require(["vue-resource/integrate/vue-jquery"], function() {
[...]
};
Requirements: Vue, JQuery und Promise Polyfill.
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.