5. Interligações de atributos (Introdução ao Vue.js)

Nesse tópico, vamos explorar maneiras de conectar dados aos atributos de elementos HTML.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

Interligações de atributos

Vamos explorar maneiras de conectar dados aos atributos de elementos HTML.

Objetivo

Vamos conectar o link de uma imagem com o elemento <img> em seu atributo src, para mostrar alguma imagem de um meme específico.

Encontrar uma imagem — (meme)

Primeiro tarefa é encontrar um meme para salvar de imagem principal de nosso Gerador de Memes. Segue o link abaixo do Imgflip que tem vários memes.

Meme Templates - Imgflip

https://imgflip.com/s/meme/I-Have-No-Idea-What-I-Am-Doing-Dog.jpg

Código inicial

Vamos adicionar a tag <img src="">abaixo do nosso h1

E vamos adicionar um objeto image com sua prop path que vai referenciar o local que você salvou a imagem do meme que você escolheu acima.

No meu caso eu criei uma pasta dentro de assets/images/ e salvei a imagem do dog-meme dentro.

path: dado do caminho da imagem

Dica: você também pode usar uma referência de um link de imagem da internet. Ex:path: 'https://imgflip.com/s/meme/Roll-Safe-Think-About-It.jpg'

https://imgflip.com/s/meme/Roll-Safe-Think-About-It.jpg

Problema

• Nós precisamos conectar o valor do path com nossa tag <img src=""> que inserimos no nosso HTML.
• Além disso, queremos que a imagem apareça na página e de forma dinâmica.
• Dessa maneira, queremos ser capazes de atualizar o source da imagem pelo nosso objeto data e a imagem ser atualizada automaticamente na nossa página.
• Como nosso atributo src da tag <img> é o que encontra o caminho da imagem, nós precisamos que o nosso dado seja interligado com esse atributo src.

Solução

Para vincular o valor do src da imagem no nosso objeto data com nossa tag img, nós vamos usar a diretiva v-bind do Vue ou sua shorthand equivalente :

Então vamos trocar no nosso index.html o <img src=""> para:

O que vai ser avaliado como:

Isso resulta em um termo chamado Data Binding.

Termo importante: Data Binding

• Quando falamos de Data Binding no Vue, nós queremos dizer que os lugares do HTML que estão ligados e mostrando dados no Vue, estão diretamente conectados com os dados do Vue.

Com isso nós temos o nosso Resultado

…E se alterarmos a imagem?

Alterando a imagem

https://imgflip.com/s/meme/Scared-Cat.jpg

Isso acontece devido ao src da imagem, estar vinculado com nosso objeto data. (Data Binding)

Outros exemplos de v-bind

Existem outros tipos de v-bind bem utilizados por exemplo

• :href="link" Quando você que interligar um link
• :class="divClass" Interligar dados de uma classe (logo vamos ver isso)
• :title="tooltipTitle" Interligar o atributo titlede um elemento
• :disabled="isDisabled" Quando você precisa desabilitar ou habilitar um botão por exemplo.

5. Interligações de atributos — (O que aprendemos)

• Dados podem ser vinculados a elementos HTML;
• Sintaxe para o bind é v-bindou sua abreviação :
• O nome do atributo vem depois do :especifica o atributo em que estamos realizando o bind;
• Dentro das aspas dos atributos, está o dado em que estamos referenciando.

5º DESAFIO

• Adicione um item chamado title dentro do objeto image.
• Realize o v-bindcom o atributo title da tag img adicionando o título do meme.

resultado esperado

Próximo post

6. Interligações em formulários (Introdução ao Vue.js)

Referências

Class and Style Bindings - Vue.js