[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|https://www.intersult.com/nexus/service/rest/repository/browse/public/com/intersult/vue-resource/] 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.