Tutoriel VueJS 3 – Liaison d’attributs

5 mars, 2022

Développement Javascript Vue

Table des matières Masquer

1 Notre objectif

2 Ajout d'une image à nos données

3 Introduction à la liaison d'attributs

3.1 Comprendre v-bind

3.2 Un lien réactif

3.3 Abréviation pour v-bind

Dans cette article, nous allons examiner le concept de liaison d’attributs.

Notre objectif

Dans le code de départ, nous avons un nouveau div avec la classe product-image.

<div class="product-image">
    <!-- Votre image -->
</div>

À la fin de l’article, nous aurons un élément img lié de manière réactive à une nouvelle propriété image de nos données. Chaque fois que la valeur de cette image change, notre image est mise à jour dans le DOM.

Ajout d'une image à nos données

Vous vous souvenez que dans notre projet nous avons un dossier d’images, avec des images pour les t-shirt bleues et rouges ? Ciblons l’une de ces images à partir d’une nouvelle propriété de données sur notre application Vue. Nous le ferons en définissant image égale à un chemin afin de pouvoir récupérer cette image.

const app = Vue.createApp({
    data() {
        return {
            product: 'T-Shirt',
            image: './assets/images/t-shirt-bleu.png'
        }
    }
})

Maintenant, nous sommes prêts à ajouter un élément img dans le modèle.

<div class="product-image">
  <img src="image">
</div>

Dans l’attribut source, nous écrivons image. Pour l’instant, cela ne sert à rien. Nous voulons que src récupère le chemin de l’image à partir de nos données, de la même manière que nous avons récupéré la valeur des données du produit dans l’expression h1 dans la leçon précédente.

La question est donc la suivante :

Comment lier l’attribut src aux données de la balise img ?

Introduction à la liaison d'attributs

Pour créer un lien entre l’attribut d’un élément HTML et une valeur provenant des données de votre application Vue, nous utiliserons une directive Vue appelée v-bind.

<img v-bind:src="image">

Maintenant, nous avons créé un lien réactif entre ce qui se trouve dans cet attribut image et les données de l’image elle-même.

Dans le navigateur, nous voyons maintenant l’image de nos t–shirts bleues s’afficher.

Comprendre v-bind

Comment fonctionne exactement la directive v-bind ? Nous utilisons cette directive pour lier dynamiquement un attribut à une expression. Dans ce cas, l’attribut est src et l’expression est ce qui se trouve dans les guillemets de cet attribut : image

<img v-bind:src="image"> <!-- attribut src lié aux données de l'image -->

Un lien réactif

Grâce au système de réactivité de Vue, si nous mettons à jour nos données d’image vers un chemin qui pointe vers l’image de nos t-shirt rouges (image : ‘./assets/images/t-shirt-rouge.png’), l’expression à laquelle notre attribut src est lié sera mise à jour et notre navigateur affichera l’image des t-shirts bleues.

Abréviation pour v-bind

L’utilisation de v-bind est très courante – si courante qu’il existe une abréviation pour cela, et c’est juste les deux points, comme ceci :

<img :src="image">

Comme vous pouvez l’imaginer, étant donné le grand nombre d’attributs HTML différents, les cas d’utilisation de v-bind sont nombreux. Par exemple, vous pouvez lier une description à un attribut alt, lier une URL à un href, lier certains styles dynamiques à un attribut class ou style, désactiver et activer un bouton, etc.