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
Zusammenfassung der Methoden zum Erstellen, Auflisten und Löschen von Docker-Containern unter Linux
1. Starten Sie den Docker-Container Starten Sie m...
VMware Workstation-Installation (Linux-Kernel) Kylin-Grafik-Tutorial
In diesem Artikel erfahren Sie, wie Sie Kylin auf...
Natives JS zur Implementierung eines Hover-Dropdown-Menüs
JS implementiert ein Hover-Dropdown-Menü. Dies is...
Einige Fragen zu Hyperlinks
<br />Ich freue mich sehr, an dieser Folge d...
Detaillierte Erklärung der MySQL-Datumsadditions- und -subtraktionsfunktionen
1. addtime() Füge die angegebene Anzahl Sekunden ...
Fehlerbehebung bei den Gründen, warum gelöschte MySQL-Datensätze nicht wirksam werden
Ein Datensatz eines Online-MySQL-Transaktionsprob...
Detaillierte Erläuterung der JS ES6-Codierungsstandards
Inhaltsverzeichnis 1. Umfang des Blocks 1.1. let ...
Details zum Überschreiben von Prototypmethoden in JavaScript-Instanzobjekten
Inhaltsverzeichnis In JavaScript können wir norma...
MySQL Serie 8 MySQL Server-Variablen
Tutorial-Reihe MySQL-Reihe: Grundlegende Konzepte...
So stellen Sie ein Vue-Projekt mit Docker-Image + nginx bereit
1. Vue-Projekt verpacken Geben Sie den folgenden ...
Detaillierte Erklärung des Linux-Befehls unzip
Inhaltsverzeichnis 1. Unzip-Befehl 1.1 Syntax 1.2...
Linux-Dateisysteme erklärt: ext4 und darüber hinaus
Heute werde ich Sie durch die Geschichte von ext4...
So verwenden Sie die JSZip-Komprimierung in CocosCreator
CocosCreator-Version: 2.4.2 Praktische Projektanw...
Verwaltung privater Docker-Repositorys und Löschen von Bildern in lokalen Repositorys
1: Installation eines privaten Docker-Warehouses ...
dh Filtersammlung
Der IE hat uns in der frühen Entwicklungsphase Ko...