Übung – Attributbindung üben

• 5 Minuten

Angenommen, Sie möchten Ihren Kunden ein Bild der Weltraumkreuzfahrt zeigen. Da jeder Kreuzfahrtabenteuer-Typ ein anderes Bild und möglicherweise einen anderen Stil verwendet, sollten Sie die Bildeigenschaften zum Datenobjekt für Ihre Anwendung hinzufügen.

Hinzufügen der Eigenschaften zum Datenobjekt

In der vorherigen Übung haben Sie eine data()-Methode innerhalb des App-Objekts erstellt. Fügen Sie nun die Eigenschaften für das Bild hinzu.

1. Öffnen Sie die Datei index.js.

2. Fügen Sie unmittelbar nach der Zeile // additional properties later den folgenden Code hinzu.

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

Die Datei index.js enthält jetzt den folgenden Code.

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'
            }
        }
    },
});

Hinzufügen des HTML-Codes

Erweitern Sie nun den HTML-Code, sodass er das Bild enthält. Sie legen die Attribute und den Stil mithilfe der Attributbindung fest.

1. Öffnen Sie die Datei index.html .

2. Fügen Sie unmittelbar nach der Zeile <div>{{ productDescription }}</div> den folgenden HTML-Code hinzu.

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

   Das gesamte div-Element für die App sollte nun wie folgt aussehen.

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

   Beachten Sie, wie die Kurzform :attribute für alle Attribute verwendet wird. Diese Verwendung erleichtert im Gegensatz zum längeren v-bind:attribute-Format das Lesen des Codes.

Testen der Ergebnisse

1. Speichern Sie alle Dateien.

2. Im Browser sollte auf der Seite nun das Bild sichtbar sein. Falls Sie es nicht sehen, aktualisieren Sie die Seite.

   

3. Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie dann Untersuchen oder unter Quelle untersuchen. Sie sehen im Browser nun die Entwicklertools und den HTML-Code. Beachten Sie, dass sowohl src als auch alt auf die Werte aus den Vue-Daten gesetzt sind.

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

Erkunden der Optionen

Sie verfügen jetzt über eine voll funktionsfähige Vue.js-Anwendung. Wenn Sie einige der Werte und Eigenschaften ändern, werden die Änderungen auf der Seite sichtbar.

Sie können die Stile und Klassen innerhalb der CSS-Datei ändern. Sehen Sie sich außerdem die verfügbaren Bindungsoptionen an.