Tutorial VueJS 3 – Ligar atributos HTML com v-bind

O capítulo anterior mostrou texto entre chavetas duplas. Essas chavetas só funcionam entre as tags, nunca dentro de um atributo. Para ligar um atributo a um dado é preciso uma diretiva: o v-bind.

A imagem do produto

A nossa loja precisa de uma imagem. Põe dois ficheiros em public/images/: t-shirt-bleu.svg e t-shirt-rouge.svg. Tudo o que está arrumado em public/ é servido tal como está na raiz do site, por isso o caminho no código será /images/t-shirt-bleu.svg.

Acrescenta uma referência para o caminho da imagem:

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
</script>

O que não funciona

Primeiro reflexo: escrever o nome da variável no atributo.

<img src="image">

O browser procura então um ficheiro literalmente chamado image e mostra uma imagem partida. O atributo recebeu a string "image", não o valor da variável.

Segundo reflexo: as chavetas.

<img src="{{ image }}">

Também não resulta. O Vue interpola o texto dos nós, não os atributos.

v-bind

A resposta certa é a diretiva v-bind. Diz ao Vue: «o conteúdo deste atributo é uma expressão JavaScript, avalia-a».

<template>
  <div class="product-display">
    <div class="product-image">
      <img v-bind:src="image" v-bind:alt="product">
    </div>
    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>
  </div>
</template>

A imagem aparece e o atributo alt retoma o nome do produto.

O atalho dos dois-pontos

O v-bind é de tal maneira frequente que tem uma forma curta: os dois-pontos sozinhos.

<img :src="image" :alt="product">

As duas escritas são estritamente equivalentes. A forma curta é a que se encontra por todo o lado, incluindo na documentação oficial, é a que vamos usar no resto do tutorial.

Uma ligação, não uma cópia

A ligação é reativa e faz-se num só sentido: do dado para o template. Se mudares o valor, o atributo acompanha.

const image = ref('/images/t-shirt-bleu.svg')

// mais tarde, no clique ou no hover:
image.value = '/images/t-shirt-rouge.svg'   // o src da img muda logo

É este mecanismo que o capítulo 5 vai usar para mudar a imagem quando passas o rato por cima de uma cor.

O que o v-bind sabe fazer mais

Qualquer atributo se liga da mesma maneira.

<a :href="http://lienProduit">Voir la fiche</a>
<button :disabled="enRupture">Ajouter au panier</button>
<div :class="classeCourante"></div>
<div :style="{ backgroundColor: couleur }"></div>
<input :value="nom">

Dois casos merecem uma nota.

Os atributos booleanos como o disabled seguem a regra do HTML: o Vue acrescenta o atributo se a expressão for verdadeira e retira-o por completo se for falsa. Escrever :disabled="false" dá um botão ativo, não um botão com disabled="false".

Os atributos class e style têm um tratamento especial: aceitam também objetos e arrays. É o tema do capítulo 6.