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>
