Vue

This page (revision-6) was last changed on 08-Jun-2020 11:58 by Dieter Käppel

This page was created on 17-Mar-2020 15:04 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
6 08-Jun-2020 11:58 4 KB Dieter Käppel to previous
5 08-Jun-2020 11:58 4 KB Dieter Käppel to previous | to last
4 08-Jun-2020 10:12 4 KB Dieter Käppel to previous | to last
3 09-May-2020 18:16 3 KB Dieter Käppel to previous | to last
2 21-Mar-2020 10:45 1 KB Dieter Käppel to previous | to last
1 17-Mar-2020 15:04 862 bytes Dieter Käppel to last

Page References

Incoming links Outgoing links

Version management

Difference between version and

At line 3 removed 3 lines
!!!Inhalt
[{TableOfContents title='Page contents' numbered='true'}]
At line 33 changed 2 lines
define(function() {
return {
define(["vue"], function(Vue) {
return Vue.component("simple-component", {
At line 39 changed one line
};
});
At line 43 removed 21 lines
!!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"]
}
}}}
At line 84 removed 86 lines
!!!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
});
}
}
});
});
}}}