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
Verwenden Sie HTML+Css, um eine einfache Navigationsleistenfunktion zu implementieren (die Navigationsleiste ändert die Hintergrundfarbe, wenn die Maus darauf stößt).
Ⅰ. Problembeschreibung: Verwenden Sie HTML+CSS, u...
Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird
VMware-Workstations starten den virtuellen Maschi...
Mehrere Lösungen für domänenübergreifende Gründe in der Webentwicklung
Inhaltsverzeichnis Domänenübergreifende Gründe JS...
Der beste Weg, freigegebene Verzeichnisse beim Start von Ubuntu 16.04 unter Virtualbox automatisch zu mounten
Benutzer virtueller Maschinen richten normalerwei...
So stellen Sie Redis in einer Linux-Umgebung bereit und installieren es in Docker
Installationsschritte 1. Redis installieren Laden...
Eine kurze Erläuterung der vier häufig verwendeten Speicher-Engines in MySQL
Einführung in vier häufig verwendete MySQL-Engine...
Ausführliches Tutorial zur Installation von Deepin in VMware15 (Bild und Text)
Vorwort Die Benutzeroberfläche von Deepin sieht w...
Detaillierte Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue
Inhaltsverzeichnis V-Modell .sync Der Unterschied...
Welche Szenarien sind für JS-Pfeilfunktionen nicht geeignet?
Inhaltsverzeichnis Überblick Definieren von Metho...
Detaillierte Erläuterung der FTP-Umgebungskonfigurationslösung (vsftpd)
1. Installieren Sie die vsftpd-Komponente Install...
Installieren Sie mehrere PHP-Versionen für Nginx unter Linux
Wenn wir die LNPM-Serverumgebung installieren und...
Analyse und Lösung des beim Start von MySQL gemeldeten Fehlers „ERROR:2002“
Vorwort Dieser Artikel stellt hauptsächlich die A...
MySQL 8.0.13 Download- und Installations-Tutorial mit Bildern und Text
MySQL ist die am häufigsten verwendete Datenbank....
So ändern Sie den Hostnamen in Linux
1. Den aktuellen Hostnamen anzeigen [root@fangjia...
Grundlegende Verwendung von Javascript-Array-Includes und -Reduces
Inhaltsverzeichnis Vorwort Array.Prototyp.enthält...