This is version 1 2 3 4 5 6 . 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>

Links#

• Awesome Vue Komponenten