Exercice – Pratiquer la liaison d’attribut

• 5 minutes

Supposons que vous souhaitez afficher une image de la croisière spatiale pour vos clients. Chaque type de croisière ayant une image différente, et peut-être un style différent, vous devez ajouter les propriétés de l’image à l’objet de données de votre application.

Ajouter les propriétés à l’objet de données

Dans l’exercice précédent, vous avez créé une méthode data() au sein de l’objet App. Ajoutez maintenant les propriétés de l’image.

1. Ouvrez le fichier index.js.

2. Immédiatement après la ligne // additional properties later, ajoutez le code suivant.

   productImage: 'assets/cruise.jpg',
   productImageDescription: 'An astronaut floats outside the window while you sit in comfort',
   productImageStyle: {
       'border-radius': '15px'
   }
   

Le fichier index.js contient désormais le code suivant.

const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            // additional properties later
            productImage: 'assets/cruise.jpg',
            productImageDescription: 'An astronaut floats outside the window while you sit in comfort',
            productImageStyle: {
                'border-radius': '15px'
            }
        }
    },
});

Ajouter le code HTML

À présent, mettez à jour le code HTML pour inclure l’image. Vous définissez les attributs et le style en utilisant une liaison d’attribut.

1. Ouvrez le fichier index.html .

2. Immédiatement après la ligne <div>{{ productDescription }}</div>, ajoutez le code HTML suivant.

   <img :src="productImage" :alt="productImageDescription" :style="productImageStyle" />
   

   La totalité de l’élément div de l’application doit maintenant ressembler au code suivant.

   <div id="app">
       <h2>{{ productName }}</h2>
       <div>{{ productDescription }}</div>
       <img :src="productImage" :alt="productImageDescription" :style="productImageStyle" />
   </div>
   

   Notez l’utilisation de la notation en abrégé :attribute sur tous les attributs. Cette utilisation simplifie la lecture du code par rapport au format plus long v-bind:attribute.

Tester les résultats

1. Enregistrez tous les fichiers.

2. Dans le navigateur, vous devez maintenant voir l’image affichée sur la page. Si vous ne la voyez pas, actualisez la page.

   

3. Cliquez avec le bouton droit sur l’image, puis sélectionnez Inspecter ou Inspecter la source. Remarquez les outils de développement dans le navigateur et le code HTML. Dans le code HTML, remarquez que src et alt sont définis sur les valeurs des données Vue.

   <img src="assets/cruise.jpg" alt="An astronaut floats outside the window while you sit in comfort">
   

Explorer les options

Vous disposez maintenant d’une application Vue.js entièrement fonctionnelle. Si vous modifiez certaines des valeurs et des propriétés, vous pouvez voir les modifications reflétées sur votre page.

N’hésitez pas à modifier les styles et les classes dans le fichier CSS. Explorez également les options de liaison disponibles.