Interpolation de 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.

Interpolation des données {{ }}¶

Une fois, les données définies, il est possible d'y faire référence à l'aide de moustaches {{...}}. 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>

Affichera en fait:

<div id="app">
    Salut Willy
</div>

.

En savoir plus sur les l'interpolation des données textuelles

Dans le cadre de ce cours, n'oubliez pas de toujours consulter la docmentation avec l'API Options Bouton à bascule pour activer Options API dans la documentation Vue.js

Erreur fréquente

Les moustaches ne sont fonctionnelles qu’à l’intérieur de la balise HTML assignée à l’app (la balise qui est mount)

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

See the Pen DEMO Vue.js: Données moustache et minuteur setInterval by TIM Montmorency (@tim-momo) on CodePen.

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, on utilise v-bind:src:

Par exemple, pour afficher l'image contenue dans la propriété picture, on utilise v-bind:src

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

ou encore la syntaxe courte avec :src :

ou encore la syntaxe courte avec :src

<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 les 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:

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>

.

See the Pen DEMO VueJS | Données by TIM Montmorency (@tim-momo) on CodePen.

attribut == undefined

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

En savoir plus sur les Liaisons d'attributs - Attribute bindings

Dans le cadre de ce cours, n'oubliez pas de toujours consulter la docmentation avec l'API Options Bouton à bascule pour activer Options API dans la documentation Vue.js

Données en format HTML via v-html¶

Si vous souhaitez envoyer une donnée en HTML, plutôt que d'utiliser les moustaches, vous devrez utiliser l'attribut v-html sur la balise qui contiendra votre donnée.

En JavaScript

const app = Vue.createApp({
  data() {
    return{
      monTitre: '<h2>Vue.js est formidable!</h2>'
    }
  }
});
app.mount('#app');

En HTML

<div v-html="monTitre">

</div>

Ce qui va générer ce résultat:

<div>
    <h2>Vue.js est formidable!</h2>
</div>

En savoir plus sur l'interpolation des données en HTML brut

Dans le cadre de ce cours, n'oubliez pas de toujours consulter la docmentation avec l'API Options Bouton à bascule pour activer Options API dans la documentation Vue.js