Wie man Vue über CDN einführt und einen Werttransfer auf verschiedenen Seiten realisiert

In der Webentwicklung ermöglicht uns die Beliebtheit komponentenbasierter Frameworks, Frontend-Seiten effizienter zu entwickeln und Code besser zu verwalten und zu verwalten. Als eines der Besten wird Vue von immer mehr Front-End-Entwicklern verwendet. Bei der Verwendung von Vue ist es normalerweise erforderlich, Daten zwischen verschiedenen Seiten zu übertragen. In diesem Artikel wird erläutert, wie Sie Vue über CDN einführen und die Datenübertragung zwischen verschiedenen Seiten realisieren.

1. Übergeben von Werten zwischen verschiedenen Seiten

Bei der Entwicklung des Vue-Frameworks müssen wir häufig Daten zwischen verschiedenen Seiten übertragen, zum Beispiel: Wir füllen die Seite aus 1 Einige Informationen müssen auf Seite 2 verwendet werden. Dies erfordert die Implementierung einer seitenübergreifenden Datenübertragung in Vue.

Bei der Datenübertragung können wir Vuex, localStorage, sessionStorage und andere Methoden verwenden. Bei Verwendung von CDN muss Vuex jedoch zugehörige Bibliotheksdateien herunterladen, und localStorage und sessionStorage unterstützen nur die Speicherung von Zeichenfolgentypen. Und wenn wir localStorage oder sessionStorage verwenden, müssen wir die Daten serialisieren und deserialisieren, was nicht nur problematisch ist, sondern auch die Leistung verringert. Daher wird in diesem Artikel eine Methode vorgestellt, die kein Herunterladen anderer Bibliotheksdateien erfordert und verschiedene Datentypen speichern kann.

2. Verwenden Sie das Fensterobjekt

Wenn CDN Vue einführt, können wir das Fensterobjekt verwenden, um Daten zwischen verschiedenen Seiten zu übertragen. Im Vue-Framework können wir eine globale Variable über das Prototypobjekt von Vue definieren:

Vue.prototype.$global = {}

Wie im obigen Code gezeigt, in Vue Im Prototypobjekt ist eine $global-Variable definiert. Diese Variable kann in jeder Komponente verwendet werden und der Wert dieser Variablen bleibt im Speicher, bis der Browser geschlossen wird.

Als nächstes können wir über das Fensterobjekt auf diese Variable zugreifen und ihr einen Wert zuweisen:

window.$global = { count: 0 }

#🎜 🎜 #Mit dem obigen Code definieren wir eine globale Variable namens $global für das Fensterobjekt und weisen ihr den Wert {count: 0} zu.

Wenn wir diese Variable auf verschiedenen Seiten übergeben müssen, können wir ihren Wert über das Fensterobjekt abrufen und ändern. Beispielsweise addieren wir 1 zum Variablenwert in einer Komponente auf Seite 1 und übergeben diesen Variablenwert an eine Komponente auf Seite 2.

//Seite 1

Vue.component('component1', {
template: <button @click="addCount">{{ count }} </button>,
data() {<button @click="addCount">{{ count }}</button>,
 data() {

return {
  count: window.$global.count
}

},
 methods: {

addCount() {
  window.$global.count++
}

}
})

//页面2
Vue.component('component2', {
 template: <span>{{ count }}</span>

return {
  count: window.$global.count
}

}, methoden: {

rrreee
}

})

//Seite 2

Vue.component('component2', {

template: <span>{{ count }}</span> ,

data() {

rrreee

}

})#🎜🎜##🎜🎜#Im obigen Code geben wir den Zählwert in $ an Die globale Variable im Fensterobjekt wird um 1 erhöht und der Wert von count wird in einer anderen Komponente von Seite 2 abgerufen. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#Das Obige ist eine Möglichkeit, Daten zwischen verschiedenen Seiten zu übertragen, wenn CDN zur Einführung des Vue-Frameworks verwendet wird. Durch die Definition einer globalen Variablen im Speicher über das Fensterobjekt und den Zugriff auf und die Änderung dieser Variablen kann eine Datenübertragung zwischen mehreren Seiten erreicht werden. Diese Methode erfordert kein Herunterladen anderer Bibliotheksdateien, erfordert keine Serialisierung und Deserialisierung von Daten und unterstützt das Speichern verschiedener Datentypen. Natürlich hat diese Methode auch einige Nachteile. Beispielsweise ist sie nicht für Daten geeignet, die häufig aktualisiert werden müssen, da jede Seite den Wert der Variablen erneut lesen muss, was zu Leistungsproblemen führen kann. #🎜🎜##🎜🎜#Abschließend ist es wichtig zu beachten, dass die Daten nach dem Schließen des Browsers verloren gehen, da sie im Speicher gespeichert sind. Wenn Sie Daten dauerhaft speichern müssen, verwenden Sie dazu bitte localStorage oder sessionStorage. #🎜🎜#

Das obige ist der detaillierte Inhalt vonWie man Vue über CDN einführt und einen Werttransfer auf verschiedenen Seiten realisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!