Découvrez 16 instructions Vue de zéro à l'encapsulation manuelle d'instructions personnalisées

Cet article vous apporte des connaissances pertinentes sur les instructions Vue et l'encapsulation manuelle des instructions personnalisées. J'espère qu'il vous sera utile.

Dans l'entretien de base frontal, les instructions de Vue sont une question d'entretien à haute fréquence

L'intervieweur a demandé : Quelles instructions Vue a-t-elle ?

Dites-lui simplement : depuis Vue3.2, Vue a un total de 16 instructions intégrées, dont :

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, où v-memo est nouveau dans 3.2 Ajouté, v-is est obsolète dans la version 3.1.0

Si l'intervieweur demande plus loin : Comment encapsuler une instruction personnalisée ?

Dites-lui simplement : les instructions personnalisées sont divisées en instructions personnalisées globales et instructions locales ; dans Vue3, vous pouvez enregistrer une instruction personnalisée globale via directive() sur l'instance d'application. Si vous souhaitez enregistrer une instruction locale, vous pouvez la configurer. dans l'option composant.directives pour enregistrer les directives locales

Après avoir lu cet article, vous aurez une compréhension complète des 16 directives Vue et maîtriserez comment personnaliser une directive

1 Introduction

1.1 Qu'est-ce qu'une directive Vue.

Dans Vue, directives En fait, c'est un attribut spécial.

Vue fera quelque chose en coulisses selon les instructions, Vue effectuera différentes opérations selon différentes instructions. parler des détails plus tard.

Quelles sont les caractéristiques de 1.2

Une caractéristique évidente des instructions Vue est qu'elles commencent toutes par v-, par exemple : v-text

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

2.

2.1 Quelles sont les instructions intégrées dans Vue

Les instructions intégrées font référence à Vue Livré avec des commandes intégrées, prêtes à l'emploi

Vue a un total de 16 commandes intégrées dans les commandes, notamment :

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, parmi lesquels v-memo est nouveau en 3.2, v-is a été abandonné en 3.1.0

Apprenons l'utilisation de base de ces instructions intégrées

2.2 Comprendre l'utilisation de base de 16 instructions intégrées

2.2.1 v-text

v Le rôle de -text est de mettre à jour le textContent de l'élément, par exemple :

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

Le contenu de l'élément h1 dépend en fin de compte de la valeur de msg

2.2.2 v-html

est très similaire au v-text, seul v-html est utilisé pour mettre à jour le innerHTML de l'élément, tel que

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

Il convient de noter que le contenu à l'intérieur doit être inséré en HTML ordinaire

2.2.3 v-show

v-show peut être basé sur des expressions Le vrai et false value, changeant la valeur d'affichage de l'élément, est utilisé pour contrôler l'affichage et le masquage de l'élément, par exemple :

Vous pouvez voir que lorsque les conditions changent, cette commande déclenche l'effet de transition d'affichage ou hide

Remarque : v -show ne prend pas en charge l'élément