Quelles sont les instructions dans Vue, et quels sont leurs scénarios d'application en développement ?

Vue.js est un framework JavaScript très populaire. Dans Vue.js, les directives sont un concept très important. Les directives sont un attribut HTML spécial fourni par Vue.js pour fonctionner. Dans cet article, nous découvrirons les instructions couramment utilisées dans Vue et leurs scénarios d'application.

1. v-if/v-else-if/v-else

La directive v-if est utilisée pour restituer conditionnellement des éléments en fonction de la valeur d'une expression. L'élément est rendu lorsque l'expression est évaluée comme vraie. Lorsque l’expression est évaluée comme fausse, l’élément ne sera pas rendu.

Les instructions v-else-if et v-else sont utilisées pour exprimer la "condition négative" de v-if, ce qui signifie que si l'instruction v-if précédente ne parvient pas à vérifier la condition, la v-else-if ou suivante v-sinon la condition sera exécutée.

En développement, v-if est souvent utilisé pour contrôler si un certain élément est affiché, comme l'affichage d'un formulaire de connexion ou d'informations utilisateur selon que l'utilisateur est connecté ou non. Exemple de code :

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<div v-if="user.loggedin">
  欢迎回来, {{ user.name }}！
</div>
<div v-else>
  <button @click="showLoginForm">请登录</button>
</div>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

2. . Vous pouvez également contrôler si un élément est affiché, mais contrairement à v-if, v-show change simplement l'attribut d'affichage CSS.

En développement, v-show est généralement utilisé pour changer fréquemment la visibilité d'un élément, comme contrôler l'expansion et la fermeture d'un menu déroulant. Exemple de code :

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="showMenu=!showMenu">下拉菜单</button>
<ul v-show="showMenu">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

3. Un attribut HTML, les attributs qui peuvent être liés incluent la classe, le style, le titre, etc. Le processus de liaison est bidirectionnel. La modification des données en JavaScript peut mettre à jour le HTML, et la modification des attributs en HTML peut mettre à jour les données en JavaScript.

En développement, le scénario le plus couramment utilisé de v-bind consiste à lier dynamiquement des attributs de classe et de style, tels que la définition de la couleur et du style des boutons en fonction de différents états. Exemple de code :

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<button
  :class="{active: isActive, disabled: isDisabled}"
  :style="{color: textColor, backgroundColor: bgColor}"
  :disabled="isDisabled"
>
  {{ buttonText }}
</button>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

4 L'instruction v-for

v-for est utilisée pour restituer un tableau ou un objet. dans un élément de boucle, il peut accepter une variable, attribuer tour à tour chaque élément du tableau ou de l'objet à cette variable, puis restituer l'élément correspondant.

En développement, v-for est souvent utilisé pour le rendu de listes et de tableaux, comme le rendu de listes d'actualités, de listes de produits, etc. Exemple de code :

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

5. La valeur du composant est utilisée pour implémenter la liaison de données bidirectionnelle. Lorsque la valeur dans le formulaire change, les données dans l'instance Vue correspondante seront également mises à jour en conséquence.

En développement, le modèle v est souvent utilisé pour l'implémentation de formulaires, comme la liaison de données bidirectionnelle des zones de saisie, des cases radio, des cases à cocher, des listes déroulantes et d'autres composants. Exemple de code :

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<input type="text" v-model="message">
<p>{{ message }}</p>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

6 La directive v-on

v-on est utilisée pour lier un écouteur d'événement. Il peut écouter divers événements tels que les événements DOM, les événements personnalisés et les événements système. Lorsque l'événement est déclenché, la méthode correspondante sera appelée.

En développement, v-on est souvent utilisé pour gérer les événements d'interaction de l'utilisateur, tels que les clics sur des boutons, la saisie au clavier, le défilement de la souris, etc. Exemple de code :

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<button @click="incrementCount">{{ count }}</button>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

7 v-text/v-html

La directive v-text est utilisée pour modifier. l'élément Si textContent est défini sur la valeur de la directive, il ne sera affiché que sous forme de texte et n'analysera pas le HTML. La directive

v-html est utilisée pour définir le innerHTML de l'élément sur la valeur de la directive. Les balises HTML peuvent être analysées, mais il existe un risque de XSS.

En développement, la directive v-text/v-html doit être utilisée avec prudence car elle augmente les risques de sécurité, elle ne doit donc être utilisée que pour insérer du contenu fiable en HTML, comme le rendu de la sortie d'un éditeur de texte enrichi. Exemple de code :

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<div v-text="content"></div>
<div v-html="content"></div>

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

Dans cet article, nous présentons les instructions couramment utilisées dans Vue et leurs scénarios d'application. Ces instructions sont Vue. Les fonctionnalités importantes du framework js peuvent améliorer efficacement l'efficacité du développement, et en même temps, elles peuvent également permettre aux applications Vue.js d'avoir des effets interactifs et une expérience utilisateur plus riches. Par conséquent, il est très important de maîtriser ces instructions lors de l’utilisation du framework Vue.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!