Maison > Article > interface Web > Quels sont les composants des instructions intégrées de Vue ?
Quels sont les composants des instructions intégrées de Vue ?
- 青灯夜游original
- 2023-01-13 14:29:483264parcourir
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.
1. Qu'est-ce qu'une commande Vue ? Dans Vue, les commandes sont en fait des attributs spéciaux
Vue fera quelque chose en coulisses en fonction de la commande. Quant à ce qu'il faut faire spécifiquement, Vue exécutera différentes commandes en fonction de différentes commandes. . L'opération sera discutée en détail plus tardQuelles 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
2.1 Quelles sont les commandes intégrées dans Vue
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ées 2.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>Le contenu de l'élément h1 dépend en fin de compte de msg La valeur
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限制于：
components
v-model的3个修饰符：
.lazy - 惰性更新，监听 change 而不是 input 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
在表单控件或者组件上可以创建双向绑定，例如：
2.2.11 v-slot
v-slot用于提供具名插槽或需要接收 prop 的插槽
可选择性传递参数，表示插槽名，默认值default
2.2.12 v-pre
v-pre指令用于跳过这个元素及其子元素的编译过程，例如:
可以看到里头的东西没有被编译
2.2.13 v-cloak
v-cloak指令主要用于解决插值表达式在页面闪烁问题
<div v-cloak>
{{ message }}
</div>[v-cloak] {
display: none;
}这样div只会在编译结束后显示
2.2.14 v-once
v-once指令用于表示只渲染一次，当要重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过
2.2.15 v-memo 3.2+
用于缓存一个模板的子树
该指令接收一个固定长度的数组作为依赖值进行记忆比对。如果数组中的每个值都和上次渲染的时候相同，则整个该子树的更新会被跳过
<div v-memo="[valueA, valueB]"></div>
在重新渲染时，如果 valueA 与 valueB 都维持不变，那么对这个
2.2.16 v-is
已在 3.1.0 中废弃，改用:is
<component :is="currentView"></component>
相关推荐：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!
Articles Liés
Voir plus- Cet article vous donnera une explication détaillée de la programmation des composants dans Vue
- L'auteur de Vue, You Yuxi, a publié un article sur 2023 et rétrospectif sur 2022 !
- Quelles sont les fonctionnalités es6 utilisées dans vue ?
- Vue3 apprend une analyse approfondie des modules CSS et de la portée
- Comment ajouter des styles aux éléments dans vue
- Analyser le principe de mise en œuvre de l'API de composition de Vue2