Erfahren Sie mehr über 16 Vue-Anweisungen von Grund auf bis hin zur manuellen Kapselung benutzerdefinierter Anweisungen

Dieser Artikel vermittelt Ihnen relevantes Wissen über Vue-Anweisungen und die manuelle Kapselung benutzerdefinierter Anweisungen. Ich hoffe, dass er Ihnen hilfreich sein wird.

Im Front-End-Basisinterview sind Vues Anweisungen eine hochfrequente Interviewfrage

Der Interviewer fragte: Welche Anweisungen hat Vue?

Sag ihm einfach: Ab Vue3.2 verfügt Vue über insgesamt 16 integrierte Anweisungen, darunter:

v-text, v-html, v-show, v-if, v-else, v-else -if, v-for, v-on, v-bind, v-model, v-slot, v-pre, v-cloak, v-once, v-memo, v-is, wobei v-memo neu ist 3.2 v-is ist übrigens in 3.1.0 veraltet.

Wenn der Interviewer weiter fragt: Wie kapselt man eine benutzerdefinierte Anweisung?

Sagen Sie ihm einfach: Benutzerdefinierte Anweisungen sind in globale benutzerdefinierte Anweisungen und lokale Anweisungen unterteilt. Sie können globale benutzerdefinierte Anweisungen über die Richtlinie () in der Anwendungsinstanz registrieren in der Komponente. Direktiven-Option zum Registrieren lokaler Direktiven

Nachdem Sie diesen Artikel gelesen haben, werden Sie ein umfassendes Verständnis der 16 Vue-Direktiven haben und beherrschen, wie Sie eine Direktive anpassen können

1.1 Was ist eine Vue-Direktive? In Vue handelt es sich tatsächlich um ein besonderes Attribut.

Vue wird gemäß den Anweisungen bestimmte Vorgänge ausführen Zu den Details später. Was sind die Merkmale von

1.2 Ein offensichtliches Merkmal von Vue-Anweisungen ist, dass sie alle mit v- beginnen, zum Beispiel: v-text

<span v-text="msg"></span>

2

2.1 Was sind die integrierten Anweisungen in Vue?

Die integrierten Anweisungen beziehen sich auf Vue. Kommt mit integrierten Befehlen, sofort einsatzbereit

Vue verfügt über insgesamt 16 integrierte Befehle, einschließlich:

v-text, v-html, v-show, v-if, v-else, v-else-if, v-for, v-on, v-bind, v-model, v- Slot, v-pre, v-cloak, v-once, v-memo, v-is, darunter v-memo neu in 3.2, v-is wurde in 3.1.0 aufgegeben

Lassen Sie uns etwas über die grundlegende Verwendung von lernen diese integrierten Anweisungen

2.2 Verstehen Sie die grundlegende Verwendung von 16 integrierten Anweisungen

2.2.1 v-text

v Die Rolle von -text besteht darin, den Textinhalt des Elements zu aktualisieren, z Beispiel:

<h1 v-text="msg"></h1>

Der Inhalt des h1-Elements hängt letztendlich vom Wert von msg ab

2.2.2 V-HTML

ist V-Text sehr ähnlich. Nur V-HTML wird zum Aktualisieren verwendet innerHTML des Elements, wie zum Beispiel

<div v-html="&#39;<h1>Hello LBJ</h1>&#39;"></div>

Es ist zu beachten, dass der darin enthaltene Inhalt als gewöhnliches HTML eingefügt werden muss

2.2.3 v-show

v-show kann auf Ausdrücken basieren Das wahre und Der falsche Wert, der den Anzeigewert des Elements umschaltet, wird verwendet, um die Anzeige und das Ausblenden des Elements zu steuern, zum Beispiel:

Sie können sehen, dass dieser Befehl den Übergangseffekt der Anzeige oder Ausblendung auslöst, wenn sich die Bedingungen ändern

Hinweis: v -show unterstützt weder das