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>
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 co dzień.
Bindowanie wielu atrybutów jednocześnie
Czasami będziesz chciał(a) zbindować kilka atrybutów naraz. Możesz w tym celu przekazać dyrektywie 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. Jeśli wydaje Ci się to nieco zagmatwane, to nie obawiaj się pytać w komentarzach pod wpisem albo na szkoleniu! zapisz się na szkolenie z Vue.js.
Ć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!