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 36 changed one line
});
};
At line 43 added 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 127 added 43 lines
!!!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
1130 Aufrufe

referenziert von
Main
Reactive Programming
Vue

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.11.21 19:10:14 GMT