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 aufgegebenLassen Sie uns etwas über die grundlegende Verwendung von lernen diese integrierten Anweisungen2.2 Verstehen Sie die grundlegende Verwendung von 16 integrierten Anweisungen2.2.1 v-text
v Die Rolle von -text besteht darin, den Textinhalt des Elements zu aktualisieren, z Beispiel:
<h1 v-text="msg"></h1>
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="'<h1>Hello LBJ</h1>'"></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 
2.2.4 v-if
v-if wird zum bedingten Rendern von Elementen
und v-basiert verwendet über den wahren oder falschen Wert des Ausdrucks. Im Vergleich zu -show zerstört v-if beim Wechseln Elemente oder erstellt sie neu, anstatt sie einfach anzuzeigen und auszublenden. Sie können sehen, dass v-if das Element direkt zerstört, während v-show wird nur optisch ausgeblendet und v-if kann sein. Wenn das Element ist, wird sein Inhalt als bedingter Block extrahiert2.2.5 v-else
v-else erfordert keinen Ausdruck, was bedeutet, dass ein „else-Block“ hinzugefügt wird. Dies entspricht der Anzeige der Elemente von v-if, wenn v-if die Bedingung erfüllt, andernfalls der Anzeige der Elemente von v-else, zum Beispiel:
Hinweis: Vor v-else Ein Geschwisterelement muss v-if oder v-else-if haben
2.2.6 v-else-if
In ähnlicher Weise stellt es den „else if-Block“ von v dar -if, genau wie v-else, müssen die vorherigen Geschwisterelemente v-if oder v-else-if haben, zum Beispiel:
2.2.7 v-for
v-for ist a Direktive zum Iterieren, um ein Element basierend auf Quelldaten oder Vorlagenblöcken mehrmals zu rendern, zum Beispiel:Sie können auch Aliase für Array-Indizes oder Schlüssel für Objekte angeben
<div v-for="(item, index) in items"></div> <div v-for="(value, key) in object"></div> <div v-for="(value, name, index) in object"></div>
2.2.8 v-on
v-on wird verwendet, um Ereignisse an Elemente zu binden, die wie folgt abgekürzt werden können: @
Modifier
.stop – ruft event.stopPropagation()
auf.prevent - 调用 event.preventDefault()
.capture - 添加事件侦听器时使用 capture 模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyAlias} - 仅当事件是从特定键触发时才触发回调
.once - 只触发一次回调
.left - 只当点击鼠标左键时触发
.right - 只当点击鼠标右键时触发
.middle - 只当点击鼠标中键时触发
.passive - { passive: true } 模式添加侦听器
例如：
<!-- 停止冒泡 --> <button @click.stop="doThis"></button>
需要注意，用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件
2.2.9 v-bind
v-bind用于绑定数据和元素属性，可以缩写为: 或.(当使用 .prop 修饰符时)，比如
<div :someProperty.prop="someObject"></div> <!-- 相当于 --> <div .someProperty="someObject"></div>
v-bind的3个修饰符
.camel - 将 kebab-case attribute 名转换为 camelCase
.prop - 将一个绑定强制设置为一个 DOM property。3.2+
.attr - 将一个绑定强制设置为一个 DOM attribute。3.2+
2.2.10 v-model
v-model限制于：
