Vue
Your trail: 

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
Vue
Vue

Version management

Difference between version and

At line 3 added 3 lines
!!!Inhalt
[{TableOfContents title='Page contents' numbered='true'}]
At line 30 changed 2 lines
define(["vue"], function(Vue) {
return Vue.component("simple-component", {
define(function() {
return {
At line 39 added 82 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"]
}
}}}
!!!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);
}
At line 125 added 45 lines
__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
});
}
}
});
});
}}}
This page (revision-6) was last changed on 08-Jun-2020 11:58 by Dieter Käppel Top
Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client
817 Aufrufe

referenziert von
Main
Reactive Programming
Vue

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.04.27 15:59:06 GMT