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 60 added 43 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).
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
822 Aufrufe

referenziert von
Main
Reactive Programming
Vue

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.04.28 09:38:38 GMT