Na segunda lição, falaremos sobre ligação de atributo, sobre como conectar dados armazenados em uma instância do Vue a atributos de elementos HTML. → Primeira lição
O objetivo da lição
Aqui, veremos como exibir uma imagem e definir o texto do atributo usando a ligação de atributo
alt. Tomaremos os dados relevantes da instância do Vue.
Código inicial
Vamos começar com
index.htmlo <body>seguinte código HTML, localizado no arquivo , na tag :
<div id="app">
<div class="product">
<div class="product-image">
<img src="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
Preste atenção na etiqueta
<div>com a turma product-image. Ele contém o elemento <img>ao qual queremos vincular dinamicamente os dados necessários para exibir a imagem.
Um elemento
<div>com uma classe é product-infousado para exibir o nome de um produto.
Aqui está o JavaScript contido no arquivo
main.js:
var app = new Vue({
el: '#app',
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg"
}
})
Observe que o objeto
dataagora tem uma nova propriedade que imagecontém o caminho para a imagem.
→ O CSS usado neste tutorial pode ser encontrado aqui .
Para conectar o estilo
index.html, adicione o <head>seguinte à tag :
<link rel="stylesheet" type="text/css" href="style.css"
Aqui procedemos da suposição de que o arquivo de estilo tem um nome
style.csse é armazenado na mesma pasta que index.html.
Aqui está a imagem que exibiremos na página.
Uma tarefa
Precisamos que uma imagem seja exibida na página. Ao fazer isso, queremos manipular dinamicamente essa imagem. Ou seja, precisamos alterar o caminho para a imagem armazenada na instância do Vue e ver imediatamente os resultados dessas alterações na página. Como o atributo do
srcelemento <img>é responsável por qual imagem o elemento exibirá, precisamos vincular alguns dados a esse atributo. Isso nos permitirá alterar dinamicamente a imagem com base nos dados armazenados na instância do Vue.
Um termo importante: ligação de dados
Quando falamos sobre ligação de dados no Vue, o ponto é que o local no modelo em que os dados são usados ou exibidos é diretamente "conectado" ou "vinculado" à fonte de dados, ou seja, ao objeto correspondente armazenado na instância Vue.
Em outras palavras, a entidade de fonte de dados está associada à entidade na qual esses dados são usados, com o coletor de dados. No nosso caso, a fonte de dados é uma instância do Vue e o coletor é um atributo do
srcelemento <img>.
A solução do problema
Para vincular um valor de propriedade
imagede um objeto de dados a uma propriedade de srctag <img>, usaremos a diretiva Vue v-bind. Vamos reescrever o código <img>da tag do arquivo index.html:
<img v-bind:src="image" />
Quando o Vue, ao processar uma página, vê essa construção, a estrutura a substitui pelo seguinte código HTML:
<img src="./assets/vmSocks-green.jpg" />
Se tudo for feito corretamente, uma imagem será exibida na página.
A imagem das meias verdes é exibida na página.
E se você alterar o valor da
imagepropriedadedoobjetodata, o valor do atributo será alterado de acordosrc, o que levará à exibição de uma nova imagem na página.
Digamos que queremos substituir as meias verdes pelas azuis. Para fazer isso, considerando que o caminho para o arquivo com a nova imagem se parece
./assets/vmSocks-blue.jpg(o arquivo de imagem pode ser encontrado aqui ), basta trazer o código de descrição da propriedadeimageno objetodatapara este formulário:
image: "./assets/vmSocks-blue.jpg"
Isso fará com que a imagem de meias azuis apareça na página.
A imagem de meias azuis é exibida na página
Casos de uso adicionais para v-bind
A diretiva
v-bindpode ser usada não apenas com um atributo src. Também pode nos ajudar a ajustar dinamicamente o atributo de imagem alt.
Vamos adicionar uma
datanova propriedade ao objeto com as opções altText:
altText: "A pair of socks"
Vamos vincular os dados correspondentes ao atributo
alt, trazendo o código do elemento <img>para este formulário:
<img v-bind:src="image" v-bind:alt="altText" />
Aqui, como no caso do atributo
src, a construção é usada, consistindo em v-binddois pontos e o nome do atributo ( alt).
Agora, se as propriedades da instância do Vue mudarem
imageou altText, os <img>dados atualizados aparecerão nos atributos do elemento correspondente . Isso não interromperá o vínculo entre os atributos do elemento e os dados armazenados na instância do Vue.
Essa técnica é usada constantemente no desenvolvimento de aplicativos Vue. Por esse motivo, há uma versão abreviada do registro de construção
v-bind:. Parece que sim :. Se você usar essa técnica ao escrever o código da tag <img>, obterá o seguinte:
<img :src="image" />
É simples e conveniente. Essa técnica melhora a limpeza do código.
Oficina
Adicione um link (elemento
<a>) com texto à página More products like this. No objeto, datacrie uma propriedade linkcontendo o link https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=socks. Vincule, usando uma diretiva v-bind, uma propriedade linka um atributo de um hrefelemento <a>.
→ Aqui está um modelo que você pode usar para resolver este problema.
→ Aqui está a solução para o problema.
Resultado
Aqui está o que aprendemos hoje:
- Os dados armazenados na instância do Vue podem ser vinculados aos atributos HTML.
- A diretiva é usada para vincular dados a atributos
v-bind. O atalho para essa diretiva é dois pontos (:). - Um nome de atributo que segue dois pontos indica o atributo ao qual os dados estão vinculados.
- Como o valor do atributo especificado entre aspas, o nome da chave é usado, pelo qual você pode encontrar os dados conectados ao atributo.
Se você estiver fazendo este curso, solicitamos que você nos conte sobre o ambiente que você usa para fazer sua lição de casa.
→ Parte 1: Instanciando o Vue
→ Parte 2: Vinculação de atributos no Vue
