Kurs Vue 3: wiązanie atrybutów HTML dyrektywą v-bind

Poprzedni rozdział wyświetlał tekst w podwójnych klamrach. Te klamry działają wyłącznie między znacznikami, nigdy w atrybucie. Żeby związać atrybut z daną, potrzebna jest dyrektywa: v-bind.

Zdjęcie produktu

Nasz sklep potrzebuje obrazka. Umieść dwa pliki w public/images/: t-shirt-bleu.svg i t-shirt-rouge.svg. Wszystko, co leży w public/, jest serwowane bez zmian z katalogu głównego serwisu, więc ścieżka w kodzie to /images/t-shirt-bleu.svg.

Dodaj referencję na ścieżkę obrazka:

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

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

Co nie działa

Pierwszy odruch to wpisanie nazwy zmiennej wprost w atrybucie:

<img src="image">

Przeglądarka szuka wtedy pliku dosłownie nazwanego image i pokazuje zepsuty obrazek. Atrybut dostał ciąg znaków "image", a nie wartość zmiennej.

Drugi odruch to klamry:

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

To również nie zadziała. Vue interpoluje tekst węzłów, a nie atrybuty.

v-bind

Właściwą odpowiedzią jest dyrektywa v-bind. Mówi ona Vue: „zawartość tego atrybutu to wyrażenie JavaScript, oblicz je”.

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

Obrazek się pokazuje, a atrybut alt przejmuje nazwę produktu.

Skrót z dwukropkiem

v-bind jest tak częste, że doczekało się formy skróconej: samego dwukropka.

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

Oba zapisy są ściśle równoważne. Formę skróconą widuje się wszędzie, także w oficjalnej dokumentacji, z niej korzystamy w dalszej części kursu.

Wiązanie, a nie kopia

Wiązanie jest reaktywne i działa w jedną stronę: od danej do szablonu. Jeśli zmienisz wartość, atrybut podąży za nią.

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

// później, po kliknięciu lub najechaniu kursorem:
image.value = '/images/t-shirt-rouge.svg'   // src elementu img zmienia się natychmiast

To ten mechanizm wykorzysta rozdział 5, żeby zmieniać obrazek po najechaniu na kolor.

Co jeszcze potrafi v-bind

Dowolny atrybut wiąże się dokładnie tak samo.

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

Dwa przypadki wymagają komentarza.

Atrybuty logiczne, takie jak disabled, trzymają się reguły HTML-a: Vue dodaje atrybut, gdy wyrażenie jest prawdziwe, i usuwa go całkowicie, gdy jest fałszywe. Zapis :disabled="false" daje aktywny przycisk, a nie przycisk z disabled="false".

Atrybuty class i style są traktowane osobno: przyjmują także obiekty i tablice. To temat rozdziału 6.