Vue
This is version . It is not the current version, and thus it cannot be edited.
Back to current version   Restore this version

Vue ist eine Javascript Framework für das Erstellen und Instantiieren von Oberflächen-Komponenten.

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(["vue"], function(Vue) {
	return Vue.component("simple-component", {
		props: {
			value: String
		},
		template: '<div>{{value}}</div>'
	});
});

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
				});
			}
		}
	});
});