Données {{ }}

Données { { } }

Afin de définir le comportement de l'app, un objet contenant diverses propriétés doit lui être passé en paramètre. Parmi ces propriétés se trouve data: une fonction retournant les données susceptibles de changer dans l'application.

Par exemple, pour définir une valeur de nom, il est possible d'écrire:

const app = Vue.createApp({ data: function() { return { firstName: "Willy", lastName: "Wonka", picture: "willy-wonka.jpg" } } });

Pour des raisons de lisibilité, il est cependant suggéré d'utiliser la nouvelle syntaxe ES6, soit:

const app = Vue.createApp({ data() { return { firstName: "Willy", lastName: "Wonka", picture: "willy-wonka.jpg" } } });

data est donc une fonction retournant un objet constitué dans ce cas-ci des propriétés: firstName, lastName et picture.

Data Interpolation des données {{ }}

Une fois, les données définies, il est possible d'y faire référence à l'aide de moustaches {{ ... }} (doubles accolades). Leurs contenus, incluant les moustaches elles-mêmes, seront remplacés par la donnée qui lui est associée. Qui plus est, si la valeur de cette donnée vient à changer, celle-ci se mettra automatiquement à jour dans le HTML.

Par exemple, le code suivant: <div id="app"> Salut { { firstName } } </div> Ne pas mettre un espace entre les deux accolades ouvrantes ni entre les deux accolades fermantes.

Affichera en fait: <div id="app"> Salut Willy </div> Interpolations Erreur fréquente
les moustaches ne sont fonctionnelles qu’à l’intérieur de la balise HTML assignée à l’app.

Voici une petite démo d'un minuteur automatique.

Attributs des balises HTML via v-bind: ou :

Les données peuvent aussi être insérées dynamiquement dans un attribut HTML (class, src, alt, style, etc.). Cependant, les moustaches ne sont pas fonctionnelles dans ce contexte ❌. Il faut donc plutôt utiliser une directive v-bind en début d'attribut afin que son contenu se popule avec une donnée présente dans l'objet data.

Par exemple, pour afficher l'image contenue dans la propriété picture:

<div id="app"> <img v-bind:src="picture"> </div>

ou encore la syntaxe courte avec ::

<div id="app"> <img :src="picture"> </div>

Si plusieurs données doivent être combinées dans le cadre d'un attribut, il est nécessaire d'utiliser un littéraux de gabarit afin de gérer la combinaison.

Par exemple, pour inscrire le prénom et le nom dans le alt d'une image:

<div id="app"> <img :src="picture" :alt="`${firstName} ${lastName}`"> </div>

Si un attribut est associé à une donnée dont la valeur équivaut à null ou undefined, l’attribut ne sera pas créé. Attributs