Tutorial VueJS 3 – binding degli attributi con v-bind

Il capitolo precedente ha mostrato del testo tra doppie parentesi graffe. Queste graffe funzionano solo tra i tag, mai dentro un attributo. Per legare un attributo a un dato serve una direttiva: v-bind.

L’immagine del prodotto

Il nostro negozio ha bisogno di un’immagine. Metti due file in public/images/: t-shirt-bleu.svg e t-shirt-rouge.svg. Tutto quello che sta in public/ viene servito così com’è alla radice del sito, quindi il percorso nel codice sarà /images/t-shirt-bleu.svg.

Aggiungi un riferimento per il percorso dell’immagine:

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

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

Quello che non funziona

Primo riflesso: scrivere il nome della variabile dentro l’attributo.

<img src="image">

Il browser cerca allora un file chiamato letteralmente image e mostra un’immagine rotta. L’attributo ha ricevuto la stringa "image", non il valore della variabile.

Secondo riflesso: le graffe.

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

Nemmeno questo funziona. Vue interpola il testo dei nodi, non gli attributi.

v-bind

La risposta giusta è la direttiva v-bind. Dice a Vue: «il contenuto di questo attributo è un’espressione JavaScript, valutala».

<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>

L’immagine compare e l’attributo alt riprende il nome del prodotto.

La scorciatoia dei due punti

v-bind è talmente frequente che ha una forma breve: i due punti da soli.

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

Le due scritture sono rigorosamente equivalenti. La forma breve è quella che si trova ovunque, documentazione ufficiale compresa, è quella che useremo nel resto del tutorial.

Un legame, non una copia

Il binding è reattivo e va in un solo senso: dal dato al template. Se cambi il valore, l’attributo segue.

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

// più tardi, al clic o al passaggio del mouse:
image.value = '/images/t-shirt-rouge.svg'   // il src dell'img cambia subito

È questo meccanismo che il capitolo 5 userà per cambiare l’immagine al passaggio del mouse su un colore.

Che altro sa fare v-bind

Qualsiasi attributo si lega allo stesso modo.

<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">

Due casi meritano una nota.

Gli attributi booleani come disabled seguono la regola dell’HTML: Vue aggiunge l’attributo se l’espressione è vera e lo toglie del tutto se è falsa. Scrivere :disabled="false" dà un pulsante attivo, non un pulsante con disabled="false".

Gli attributi class e style hanno un trattamento speciale: accettano anche oggetti e array. È l’argomento del capitolo 6.