Préambule
- Les démonstrations de ce TD se basent sur les sources disponibles [ ici ].
<aside>
⚠️
Attention, seul le répetoire src est dans l'archive. Il faut donc créer un projet avec vue-cli et remplacer son répertoire src.
</aside>
2°/ directives
2.1°/ Afficher du texte dynamique dans <p>, <span>, <li>, ...
- Il suffit d'utiliser les "moustaches"
{{ }}
au sein d'une balise de type <p>, <span>, <li> .etc. dans la partie template de notre composant.
- La valeur entre moustache est une expression javascript. Cela peut donc être le simplement le nom d'une variable locale (définie dans data ou calculée), un appel à une fonction, ou encore une unique instruction mais sans mot-clé de contrôle (if, for, while, ...). En revanche, on peut utiliser les opérateur logiques et arithmétiques.
<aside>
⚠️
ATTENTION ! : {{ }}
ne permet pas d'ajouter des éléments au DOM. Donc s'il contient du HTML, c'est le code qui est affiché, pas son interprétation.
</aside>
- Pour que la valeur soit interprétée, il faut utiliser l'attribut v-html de vuejs, dans la balise qui sert de point d'affichage.
- La valeur de l'attribut est le nom d'un champ de data qui contient le HTML à afficher.
<aside>
❓
Remarques globales :
- ATTENTION ! Ne JAMAIS utiliser v-html sur une variable contenant une valeur fixée par une entrée utilisateur. C'est une énorme faille. Par exemple, cela permet d'injecter du javascript.
- on peut mettre entre moustache n'importe quelle variable accessible via data mais jamais des variables définies en dehors. En revanche, les attributs de data peuvent parfaitement être initialisés grâce à des variables externes.
</aside>
2.2°/ Affecter la valeur d'une variable de data à un attribut de balise : v-bind
- Les moustaches doivent être utilisées à l'intérieur d'une balise, on ne peut donc pas les utiliser pour fixer la valeur d'un attribut de balise.
- Pour cela, vuejs propose la directive v-bind, avec la syntaxe suivante :
v-bind:nom_attribut="expression_js"
.
- nom_attribut correspond normalement à un attribut valide pour la balise. Cela dit, si on met un nom invalide, il ne se passe rien de spécial.
- L'expression donnée après le = suit les mêmes principes que pour les moustaches : nom de champ, appel de fonction, ...
- Bien entendu, il faut que le type de la valeur retournée par l'expression corresponde au type attendu par l'attribut. Par exemple :
- les attributs à valeur booléenne (par ex. readonly) doivent être reliés à une expression renvoyant un booléen,
- l'attribut style doit être relié à un objet ou tableau contenant des couples propriété_css : valeur,
- l'attribut class doit être relié à un objet ou tableau contenant des noms de classes,
- En vuejs, l'utilisation de v-bind est extrêmement fréquente. C'est pourquoi il existe un raccourci d'écriture : il suffit d'enlever v-bind, mais en gardant les : devant le nom de l'attribut.