Il y a 16 instructions intégrées : 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-memo est nouveau dans la version 3.2 et v-is est abandonné dans la version 3.1.0. v-show est utilisé pour contrôler l'affichage et le masquage des éléments, et v-if est utilisé pour restituer conditionnellement des éléments en fonction de la valeur vraie ou fausse d'une expression.
L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.
Quelles sont les caractéristiques de la commande
Une caractéristique évidente de la commande Vue est que tout commence par v-, par exemple : v-text.
<span v-text="msg"></span>
2. Commandes intégrées
Les commandes intégrées font référence aux commandes intégrées de Vue, qui peuvent être utilisées hors de Vue ? la box
Vue a un total de 16 commandes 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, parmi lesquels v-memo est nouveau dans la version 3.2, v-is est abandonné dans la version 3.1.0Apprenons l'utilisation de base de ces instructions intégrées2.2 Comprendre l'utilisation de base de 16 instructions intégrées2.2.1 v-text
Le rôle de v-text consiste à mettre à jour le textContent de l'élément, par exemple :
<h1 v-text="msg"></h1>
2.2.2 v-html
est très similaire à v -text, sauf que v-html est utilisé pour mettre à jour le innerHTML de l'élément, tel que
<div v-html="'<h1>Hello LBJ</h1>'"></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 changer la valeur d'affichage de l'élément en fonction de la valeur vraie et fausse de l'expression pour contrôler l'affichage et le masquage de l'élément, par exemple :
Comme vous pouvez le voir, lorsque les conditions changent , cette commande déclenche l'effet de transition d'affichage ou de masquage Remarque : v-show ne prend pas en charge l'élément , et ne prend pas non plus en charge v-else 2.2.4. v-if
v-if est utilisé pour. rendre conditionnellement les éléments en fonction de la valeur vraie ou fausse d'une expression
Comparé à v-show, v-if est la destruction ou la reconstruction d'éléments lors du changement, plutôt que simplement afficher et masquer
Vous pouvez le voir lorsque l'expression est fausse, v-if détruit directement l'élément, tandis que v-show le cache visuellementEt v-if peut être , si l'élément est bloc conditionnel
2.2.5 v-else
v-else ne nécessite pas d'expression, ce qui signifie ajouter un "bloc else", ce qui équivaut à afficher les éléments de v-if lorsque v-if remplit la condition , sinon affichez les éléments v-else, par exemple :
Remarque : l'élément frère avant v-else doit avoir v-if ou v-else-if
2.2.6 v-else-if
De même, le "else if block" représentant v-if est le même que v-else. L'élément frère précédent doit avoir v-if ou v-else-if, par exemple :
2.2.7 v-. for
v-for est une directive utilisée pour itérer, rendant un élément ou un bloc de modèle plusieurs fois en fonction des données source, par exemple :Vous pouvez également spécifier un alias pour un index de tableau ou une clé pour un object
<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 est utilisé pour lier des événements à des éléments, qui peuvent être abrégés en : @
modifier
.stop - appeler event.stopPropagation()
.prevent - call event.preventDefault()
.capture - Utiliser le mode capture lors de l'ajout d'écouteurs d'événements
.self - Déclencher des rappels uniquement lorsque l'événement est déclenché à partir de l'élément lui-même auquel l'auditeur est lié
.{keyAlias} - Le rappel n'est déclenché que lorsque l'événement est déclenché à partir d'une touche spécifique
.once - Le rappel n'est déclenché qu'une seule fois
.left - Se déclenche uniquement lorsque le bouton gauche de la souris le bouton est cliqué
.right - Déclenché uniquement lorsque le bouton droit de la souris est cliqué
.middle - Déclenché uniquement lorsque le bouton central de la souris est cliqué
.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限制于：
