Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue
1. Dynamische Komponenten
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Stil>
#app {
Schriftgröße: 0
}
.dynamische-Komponente-Demo-Tab-Button {
Polsterung: 6px 10px;
Rahmen oben links – Radius: 3px;
Rahmen oben rechts – Radius: 3px;
Rand: 1px durchgezogen #ccc;
Cursor: Zeiger;
Rand unten: -1px;
Rand rechts: -1px;
Hintergrund: #f0f0f0;
}
.dynamische-Komponente-Demo-Tab-Button.dynamische-Komponente-Demo-Aktiv {
Hintergrund: #e0e0e0;
}
.dynamic-component-demo-tab-button:hover {
Hintergrund: #e0e0e0;
}
.dynamische-Komponente-Demo-Posts-Tab {
Anzeige: Flex;
}
.dynamische-Komponente-Demo-Tab {
Schriftgröße: 1rem;
Rand: 1px durchgezogen #ccc;
Polsterung: 10px;
}
.dynamische-Komponente-Demo-Beiträge-Seitenleiste {
maximale Breite: 40vw;
Rand: 0 !wichtig;
Polsterung: 0 10px 0 0 !wichtig;
Listenstiltyp: keiner;
Rahmen rechts: 1px durchgezogen #ccc;
Zeilenhöhe: 1,6em;
}
.dynamische-Komponente-Demo-Beiträge-Seitenleiste li {
Leerzeichen: Nowrap;
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Cursor: Zeiger;
}
.dynamische-Komponente-demo-aktiv {
Hintergrund: hellblau;
}
.dynamische-Komponente-Demo-Post-Container {
Polsterung links: 10px;
}
.dynamische-Komponente-Demo-Post > :erstes-Kind {
Rand oben: 0 !wichtig;
Polsterung oben: 0 !wichtig;
}
</Stil>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</Kopf>
<Text>
<div id="app">
<button v-for="Tabulatortaste in Tabulatoren" Klasse="dynamische-Komponente-Demo-Tabulatortaste"
v-bind:Klasse="{'dynamic-component-demo-active': tab === currentTab}"
@click="currentTab = tab">{{ tab }}</button>
<am Leben erhalten>
<Komponente v-bind:is="currentTabComponent"></Komponente>
</am Leben erhalten>
</div>
<Skript>
Vue.component('tab-posts', {
Daten: Funktion(){
zurückkehren {
Beiträge:
{id: 1, title: 'Cat Ipsum', content: 'Fortsetzung warte, bis der Sturm vorüber ist, ...'},
{id: 2, Titel: 'Hipster Ipsum', Inhalt: 'Bushwick Blue Bottle-Szenegänger ...'},
{id: 3, title: 'Cupcake Ipsum', content: 'Zuckerguss-Dessert-Soufflé ...'},
],
ausgewählter Beitrag: null
}
},
Vorlage: `<div class="dynamic-component-demo-posts-tab dynamic-component-demo-tab">
<ul Klasse="dynamische-Komponente-Demo-Beiträge-Seitenleiste">
<li v-for="Beitrag in Beiträgen"
v-bind:key="post.id"
v-on:click="ausgewählterBeitrag = Beitrag"
v-bind:class="{'dynamic-component-demo-active': post===selectedPost}">
{{ post.title }}
</li>
</ul>
<div Klasse="dynamische-Komponente-Demo-Post-Container">
<div v-if="ausgewählterBeitrag" Klasse="dynamische-Komponente-Demo-Beitrag">
<h3>{{ ausgewählter Beitrag.Titel }}</h3>
<div v-html="ausgewählterBeitrag.content"></div>
</div>
<starkes v-else>
Klicken Sie links auf einen Blogtitel, um ihn anzuzeigen.
</strong>
</div>
</div>`
});
Vue.component('tab-archive', {
Vorlage: '<div class="dynamic-component-demo-tab">Archivkomponente</div>'
});
neuer Vue({
el: '#app',
Daten: {
currentTab: 'Beiträge',
Registerkarten: ['Beiträge', 'Archiv']
},
berechnet: {
currentTabComponent: Funktion(){
gibt „Tabulator-“ + this.currentTab.toLowerCase() zurück
}
}
});
</Skript>
</body>
</html>
Durch die Verwendung von Keep-Alive bei dynamischen Komponenten kann der Zustand der Komponente beim Wechseln der Komponente aufrechterhalten werden. Dadurch werden Leistungsprobleme durch wiederholtes Rendern vermieden. 2. Asynchrone KomponentenMit Vue können Sie Ihre Komponenten als Factory-Funktion definieren, die Ihre Komponentendefinition asynchron auflöst.
Vue.component('async-example', Funktion (auflösen, ablehnen) {})Hier können Sie Vue.js – Komponentengrundlagen überprüfen. Wir verwenden ein mit Webpack gebündeltes Vue-Projekt, um asynchrone Komponenten einzuführen.
<!-- HalloWelt.vue -->
<Vorlage>
<div>
<h2 class="title">{{msg}}</h2>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Daten () {
zurückkehren {
msg: 'Hallo Vue!'
}
}
}
</Skript>
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
.Titel {
Polsterung: 5px;
Farbe: weiß;
Hintergrund: grau;
}
</Stil>
<!-- App.vue -->
<Vorlage>
<div id="app">
<HalloWelt/>
</div>
</Vorlage>
<Skript>
importiere HelloWorld aus './components/HelloWorld'
Standard exportieren {
Name: "App",
Komponenten:
Hallo Welt
}
}
</Skript>
<Stil>
</Stil>Wir ändern den Inhalt des <script>-Tags von App.vue in:
Standard exportieren {
Name: "App",
Komponenten:
Hallo Welt: () => import('./components/HelloWorld')
}
}Dies implementiert die Funktion der App-Komponente, die die HelloWorld-Komponente asynchron lädt. Wir können das Laden auf Abruf erreichen.
<!-- App.vue -->
<Vorlage>
<div id="app">
<button @click="show = true">Tooltip laden</button>
<div v-if="anzeigen">
<HalloWelt/>
</div>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Daten: () => ({
anzeigen:false
}),
Komponenten:
Hallo Welt: () => import('./components/HelloWorld')
}
}
</Skript>
<Stil>
</Stil>Die asynchrone Komponentenfabrikfunktion kann hier auch ein Objekt im folgenden Format zurückgeben:
const AsyncComponent = () => ({
// Zu ladende Komponente (sollte ein „Promise“-Objekt sein)
Komponente: import('./MyComponent.vue'),
//Komponentenladen, das beim asynchronen Laden von Komponenten verwendet wird: LoadingComponent,
// Beim Laden der verwendeten Komponente schlägt der Fehler fehl: ErrorComponent,
// Zeigt die Verzögerungszeit der Komponente während des Ladens an. Der Standardwert ist 200 (Millisekunden)
Verzögerung: 200,
// Wenn ein Timeout angegeben ist und die Komponentenladung abläuft,
//Verwende die Komponente, die verwendet wird, wenn das Laden fehlschlägt. Der Standardwert ist: „Unendlich“.
Zeitüberschreitung: 3000
})siehe:Dynamische Komponenten und asynchrone Komponenten – Vue.js Das Obige ist der detaillierte Inhalt für ein vertieftes Verständnis der dynamischen und asynchronen Komponenten von Vue. Weitere Informationen zu dynamischen und asynchronen Komponenten von Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Lösung für das Problem der langsamen Docker-Pull-Image-Geschwindigkeit
>>: So migrieren Sie MySQL-Daten richtig nach Oracle
Artikel empfehlen
So ändern Sie den Bildlaufleistenstil in Vue
Inhaltsverzeichnis Zunächst müssen Sie wissen, da...
Detaillierte Verwendung von React.Children
Inhaltsverzeichnis 1. Reagieren.Children.map 2. R...
JavaScript-Grundlagenoperatoren
Inhaltsverzeichnis 1. Betreiber Zusammenfassen 1....
js zur Realisierung von Login- und Registrierungsfunktionen
In diesem Artikelbeispiel wird der spezifische Co...
Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign
Im Zuge des schrittweisen Übergangs von herkömmli...
Beispiel für die Bereitstellung eines Django-Projekts mit Docker
Es ist auch sehr einfach, Django-Projekte mit Doc...
Django verwendet Pillow, um einfach eine Verifizierungscodefunktion einzurichten (Python)
1. Importieren Sie das Modul und definieren Sie e...
Detaillierte Erläuterung des MLSQL-Beispiels zur Berechtigungssteuerung zur Kompilierungszeit
Vorwort Das einfache Verständnis von MySQL-Berech...
Zusammenfassung einiger Punkte, die bei der Registrierung von Tomcat als Dienst zu beachten sind
Hier sind einige Punkte, die Sie bei der Registri...
Tutorial zur Implementierung von Tabellenladebaumdaten in der Vue-Komponentenbibliothek ElementUI
ElementUI implementiert ein Tutorial zum Laden vo...
JavaScript zur Implementierung eines einfachen Web-Rechners
Hintergrund Da ich einem neuen Projektteam zugewi...
Implementierung der Fastdfs+Nginx-Clusterkonstruktion
1. Einführung in Fastdfs 1. Was ist Fastdfs? Fast...
JavaScript-OffsetParent-Fallstudie
1. Definition von offsetParent: offsetParent ist ...
Detaillierte Erklärung zum Schreiben von MySQL ungleich null und gleich null
1. Tabellenstruktur 2. Tabellendaten 3. Das Abfra...
Ausrichtungsproblem zwischen Eingabetextfeld und Bildbestätigungscode (Bild ist immer einen Kopf höher als die Eingabe)
Bei der Erstellung von Webseiten werden Eingabe un...