Dynamiczne atrybuty w Vue.js – dyrektywa v-bind

Ten wpis jest 3 częścią z 7 w kursie Vue.js

W poprzednim wpisie pokazałem Ci jak wyświetlić dynamiczne dane w Vue.js za pomocą wąsów, czyli podwójnych nawiasów klamrowych ({{ nazwaZmiennej }}). Dziś dowiesz się jak przekazać je do atrybutów elementu HTML za pomocą dyrektywy v-bind.

Dyrektywa v-bind

Dyrektywy w Vue.js to specjalne atrybuty z przedrostkiem v-. Wartością takiej dyrektywy jest wyrażenie JavaScript. Dyrektywy mają za zadanie reaktywne aktualizowanie drzewa DOM zawsze gdy wartość przekazanego wyrażenia się zmieni. Vue udostępnia kilka wbudowanych dyrektyw takich jak v-if, v-for, czy v-bind.

Niektóre dyrektywy przyjmują po dwukropku parametr. Tak właśnie jest w tym przypadku: v-bind:nazwaAtrybutuHtml. Dla przykładu, dynamiczne zbindowanie wartości to atrybutu href możesz osiągnąć za pomocą v-bind:href="nazwaZmiennej" tak, jak w poniższym przykładzie.

new Vue({
  data() {
    return {
      text: "Type of Web",
      destination: "https://typeofweb.com/"
    };
  }
}).$mount("#app");
<div id="app">
  <a v-bind:href="destination">{{ text }}</a>
  <br>
  <input v-model="destination" />
</div>

See the Pen JLBgpv by Wojciech Urbański (@wojtiku) on CodePen.

v-bind będziemy później używać również do dynamicznego przekazywania danych do zagnieżdżonych komponentów Vue. Opowiem Ci o tym więcej w jednej z kolejnych lekcji.

Skrócona składnia v-bind

Vue.js w wielu miejscach robi odstępstwa od reguły aby ułatwić użytkownikom życie. Tak właśnie jest w przypadku v-bind. Jak pewnie zauważysz pisząc we Vue.js, jest to bardzo szeroko wykorzystywana dyrektywa. Z tego powodu twórcy frameworka postanowili ułatwić życie programist(k)om i udostępnili dla niej również skrócony zapis.

<div id="app">
  <a :href="destination">{{ text }}</a>
</div>

Powyższy kod jest równoważny temu, czego użyliśmy wcześniej – wystarczy, że nazwę atrybutu poprzedzisz znakiem dwukropka, a zostanie on dynamicznie zbindowany. Zapis taki jest bardzo zwięzły i czytelny, przez co to głównie ta wersja jest wykorzystywana na codzień.

Bindowanie wielu atrybutów jednocześnie

Czasami będziesz chciał(a) zbindować kilka atrybutów naraz. Możesz w tym celu przekazać dyrektiwie v-bind obiekt. Jego klucze zostaną użyte jako nazwy atrybutów, a wartości zostaną odpowiednio zbindowane.

new Vue({
  data() {
    return {
      text: "Type of Web",
      linkAttrs:  {
        href: "https://typeofweb.com/",
        title: "Blog o programowaniu"
      }
    };
  }
}).$mount("#app");
<div id="app">
  <a v-bind="linkAttrs">{{ text }}</a>
</div>

Powyższy kod dynamicznie ustawi na linku zarówno atrybut href, jak i title.

Ćwiczenie

Spróbuj użyć dyrektywy v-bind, aby stworzyć proste narzędzie do sprawdzania jak wygląda obrazek o zadanym URL. Aby to osiągnąć, dynamicznie zbinduj atrybut src tagu <img />. Podziel się swoim rozwiązaniem w komentarzach!