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.
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.
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'
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 objetodata
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 atributosrc
.
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
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 atributotitle
de 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-bind
ou 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-bind
com o atributotitle
da tagimg
adicionando o título do meme.
Próximo post
6. Interligações em formulários (Introdução ao Vue.js)