简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter des directives personnalisées dans Vue ?

亚连
Libérer： 2018-06-07 17:42:26
original
2687 Les gens l'ont consulté

Cet article présente principalement l'utilisation des instructions natives et des instructions personnalisées de Vue. Les amis dans le besoin peuvent s'y référer

1. 🎜> Quand j'ai commencé à apprendre Vue, j'ai vu le mot « instruction » lorsque j'ai regardé le site officiel. J'étais abasourdi, quoi ? Quelle est la consigne ? Plus tard, au fur et à mesure que nous poursuivons notre lecture, « v-for », « v-show » et « v-if » comme celui-ci sont appelés instructions. Plus tard, quand j'en ai presque fini avec Vue, lorsque j'ai commencé à écrire des projets, j'ai découvert qu'il n'y avait que quelques instructions courantes, telles que ".

Vous pouvez considérer cela comme une sorte de syntaxe sugar ou une sorte de Command. Parmi ces instructions courantes, l'usage général est le suivant :

v-if”“v-show”“v-model”“v-for”“v-bind”“v-on”1.v-text: string Utilisation : Pour mettre à jour le textContent de l'élément, vous devez utiliser {{Mustache}. } interpolation. 🎜>

2.v-show : any Usage : Changez l'attribut CSS d'affichage de l'élément en fonction de la valeur vraie ou fausse de l'expression

3.v-if : any Usage. : Afficher la condition vraie ou fausse de l'expression. L'élément et ses liaisons/composants de données sont détruits et reconstruits lors du changement. S'il s'agit d'un , son contenu est utilisé comme bloc conditionnel pour déclencher l'effet de transition. la condition change. 4.v-for:Array | Objet | chaîne Utilisation : Rendre les éléments ou les blocs de modèle plusieurs fois en fonction des données source. Syntaxe :

5.v-on : Paramètre d'instruction en ligne $ event (obligatoire) Modificateur. 　

6.v-bind : any Type : any (avec argument) | Objet (sans argument) Paramètre : attrOrProp (facultatif Modificateur : .prop --- est utilisé Bind DOM) ; attributs ; .camel ---transforme le nom de l'attribut kebab-case en camelCase .(pris en charge depuis 2.1.0) Utilisation : lors de la liaison des attributs de classe et de style, d'autres types de valeurs sont pris en charge, tels que les objets et les tableaux dans When ; accessoires de liaison, les sous-composants doivent déclarer des accessoires

7.v-model : Limiter les composants