Exercício – Praticar a associação de atributo

Concluído

Digamos que você deseje exibir uma imagem do cruzeiro espacial para seus clientes. Como cada tipo de aventura do cruzeiro tem uma imagem diferente e, talvez, um estilo diferente, o ideal é adicionar as propriedades de imagem ao objeto de dados do aplicativo.

Adicionar as propriedades ao objeto de dados

No exercício anterior, você criou um método data() dentro do objeto App. Agora, adicione as propriedades da imagem.

1. Abra o arquivo index.js.

2. Adicione o código a seguir, logo após a linha // additional properties later.

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

Agora, o arquivo index.js contém o código a seguir.

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

Adicionar o HTML

Agora, atualize o HTML para incluir a imagem. Você define os atributos e o estilo usando a associação de atributos.

1. Abra o arquivo index.html .

2. Adicione o HTML a seguir, logo após a linha <div>{{ productDescription }}</div>.

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

   O elemento div inteiro do aplicativo agora será semelhante ao código a seguir.

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

   Observe como a notação abreviada :attribute é usada em todos os atributos. Esse uso torna o código mais fácil de ler do que o formato mais longo v-bind:attribute.

Testar os resultados

1. Salve todos os arquivos.

2. No navegador, agora você verá a imagem exibida na página. Caso contrário, atualize a página.

   

3. Clique com o botão direito do mouse na imagem e selecione Inspecionar ou Inspecionar código-fonte. Observe as ferramentas para desenvolvedores no navegador e no HTML. No HTML, observe que src e alt são definidos com os valores dos dados do Vue.

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

Explorar as opções

Agora você tem um aplicativo Vue.js totalmente funcional. Se você alterar alguns valores e algumas propriedades, verá as alterações refletidas na página.

Fique à vontade para alterar os estilos e as classes do arquivo CSS. Explore também as opções de associação disponíveis.