Vue ist eine Javascript Framework für das Erstellen und Instantiieren von Oberflächen-Komponenten.
Inhalt#
Allgemeines#
Am Besten versendet man Vue zusammen mit RequireJS, damit man Komponenten dynamisch laden kann.Application#
Um eine Vue-Applikation zu starten, wird eine bestehendes HTML-Tag verwendet:
new Vue({
el: "#vue-root"
});
RequireJS#
Zusammen mit RequireJS sieht es dann so aus:
define(["vue"], function(Vue) {
return new Vue({
el: "#vue-root"
});
});
Components#
Komponenten werden mit Vue.component definiert:
define(function() {
return {
props: {
value: String
},
template: '<div>{{value}}</div>'
};
});
Provide and Inject#
In komplexen Szenarien kann man Daten oder Methoden von der Wurzelkomponente an untergeordnete Komponenten weitergeben wollen.Übergeordnete Komponente:
{
provide: {
someProp: "someValue"
}
}
Untergeordnete Komponente:
{
inject: ["someProp"]
}
Reactivity#
Vue implementiert standardmäßig Reactivity. Änderungen in Properties führen zu Änderungen in der View (dem DOM-Tree). Allerdings gibt es einige Besonderheiten.Simple Property#
Einfache Properties, etwa String, Number, Boolean sind nicht reaktiv, da das zugrundeliegende Objekt nicht beobachtet werden kann. Die Reaktivität kann programmatisch vorgenommen werden.Child:
methods: {
_visible: function(visible) {
this.$emit("update:visible", visible);
}
}
Parent:
<dialog-panel :visible.sync="visible">[...]</dialog-panel>
Integration#
Es ist besser, Applikationen von vorne herein mit Vue zu bauen. Manchmal möchte man Vue in eine bestehende Application integrieren. Insbesondere wenn diese JQuery und traditionelles Inline-Scripting verwendet, ist eine gewisse Konfiguration erforderlich:index.html:
<html> <head> <script type="text/javascript" src="jquery-1.12.4.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="require.js" data-main="main"></script> </head> <body> <div id="vue-root><template> [...] </template></div> </body< </html>
main.js:
window.$.holdReady(true);
requirejs.undef("jquery");
requirejs.undef("jquery-ui");
define(["vue", "jquery", "jquery-ui"], function(Vue, $) {
return new Vue({
el: "#vue-root",
created: function() {
this.scripts = $("template", this.$options.el).contents().find("script");
},
mounted: function() {
window.eval(this.scripts.text());
window.$.holdReady(false);
}
});
});
Erklärung: Zunächst wird das bestehende JQuery auf Hold gesetzt, so dass dessen Ready-Function erst nach der Initialisierung ausgeführt werden. Dies ist wichtig, da während der Intitialisierung vom neuen JQuery die globalen Variablen überschrieben werden, bis diese schließlich mit $.noConflict() wieder hergestellt werden. Des Weiteren wird ein <template>-Tag eingefügt, sodass keine <script>-Tags ausgeführt werden, bevor Vue vollständig initialisiert ist. Vue manipuliert den DOM-Tree im Browser, das zur Störung von Inline-Scripten und Tag-Referenzen führen kann. Inline-Skript-Tags werden in der Vue-Phase "created" zunächst eingesammelt und in der Phase "mounted" schließlich ausgeführt. Dann wird das JQuery wieder freigegeben zum Ausführen ($.holdReady).
Vue Router#
Eine Erweiterung ist Vue Router, kann als vue-router.js downgeloaded werden.Konfiguration#
Das main.js sieht wie folgt aus:
define(["vue", "vue-router"], function(Vue, VueRouter) {
Vue.use(VueRouter);
return new Vue({
router: new VueRouter({
mode: "history"
})
});
})
Hinweis: Ohne mode: history wird mit der hässlichen URL-Endung "!#" gearbeitet, weil alte Browser das programmatische Ändern der URL-Zeile nicht unterstützen.
Query Binding#
Die Query-Parameter sind über this.$route.query komfortabel zugänglich. Leider können sie nicht verändert werden. Eine Erweiterung dafür sieht wie folgt aus:
require(["vue", "jquery"], function(Vue, $) {
Vue.util.defineReactive(Vue.prototype, "$query", {});
Vue.mixin({
mounted: function() {
if (!this.$parent && this.$router) {
this.$query = $.extend(true, {}, this.$route.query);
this.$watch("$query", {
handler: function(value) {
this.$router.push({
query: value
});
},
deep: true
});
}
}
});
});
