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).