Indietro

Prossima

Esercizio - Fare pratica con l'associazione di attributi

Completato

Si supponga di voler visualizzare un'immagine della crociera nello spazio per i clienti. Poiché ogni tipo di avventura in crociera avrà un'immagine diversa e probabilmente uno stile diverso, si vogliono aggiungere le proprietà dell'immagine all'oggetto dati dell'applicazione.

Aggiungere le proprietà all'oggetto dati

Nell'esercizio precedente è stato creato un metodo data() all'interno dell'oggetto App. Ora si aggiungeranno le proprietà per l'immagine.

1. Aprire il file index.js.

2. Aggiungere il codice seguente, subito dopo la riga // additional properties later.

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

Il file index.js contiene ora il codice seguente.

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

Aggiungere il codice HTML

A questo punto occorre aggiornare il codice HTML in modo che includa l'immagine. Gli attributi e lo stile verranno impostati tramite l'associazione di attributi.

1. Aprire il file index.html .

2. Aggiungere il codice HTML seguente, subito dopo la riga <div>{{ productDescription }}</div>.

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

   L'intero elemento div per l'app dovrebbe ora apparire come il codice seguente.

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

   Come si può notare, viene usata la notazione abbreviata :attribute in tutti gli attributi. Questo rende il codice più facile da leggere rispetto al formato più lungo v-bind:attribute.

Testare i risultati

1. Salvare tutti i file.

2. Nel browser si dovrebbe ora vedere l'immagine visualizzata nella pagina. Se non viene visualizzato, aggiorna la pagina.

   

3. Fare clic con il pulsante destro del mouse sull'immagine, quindi scegliere Inspect (Esamina) o Inspect source (Esamina origine). Si notino gli strumenti di sviluppo nel browser e il codice HTML. Nel codice HTML sia src che alt sono impostati sui valori dei dati di Vue.

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

Esplorare le opzioni

A questo punto si ha un'applicazione Vue.js completamente funzionale. Se si modificano alcuni valori e proprietà, le modifiche vengono riflesse nella pagina.

È possibile modificare liberamente gli stili e le classi nel file CSS. Esplorare anche le opzioni di associazione disponibili.

Continua