Vue.js öğrenmeye başladığınızda ilk karşınıza çıkacaklardan bir tanesi de v-bind ifadesi olacaktır. Bu yazıda Vue.js’te v-bind directive nedir ve v-bind ne zaman / ne için kullanılır konularına değineceğim.
Öncelikle şunu da belirtmek isterim ki genel olarak v-model ve v-bind (v-for, v-html, v-text, v-on, v-once, v-if, v-show, v-slot… gibi birçok directive de var) çoğu zaman karıştırılabiliyor. İlk önce ikisinin de farklı birer Vue.js directive’i olduğunu, yani birbirinin aynısı olmadığını belirtmek gerekir.
Vue.js’te v-model directive‘inin ne olduğuna daha önceki yazılarda değinmiş olduğum için direkt olarak v-bind konusuna geçebiliriz.
v-bind Kullanımları
v-bind’ı 2 farklı şekilde kullanabilirsiniz.
<a v-bind:href="gidilecekUrlDegiskeni">{{ gidilecekURLTexti }}</a>ve
<a :href="gidilecekUrlDegiskeni">{{ gidilecekURLTexti }}</a>aynı işe yaramaktadır. Yani v-bind yazmasak da aynı işlevi görmektedir.
v-bind Ne İçin Kullanılır?
Üstteki örneği biraz daha açmak gerekiyor çünkü bilerek tam olarak açıklamadım. Sizce ne işe yarıyor olabilir?
Vue.js ile ilgili olarak bir yerlerde bind etmek ifadesini duymuş ya da görmüş olabilirsiniz. Hatta öyle ki v-model için de “two way binding” ifadesini kesinlikle görmüşsünüzdür. v-model ile iki taraflı bağlama yaparken, v-bind ile tek taraflı bir bağlama yapacağız.
gidilecekUrlDegiskeni ifadesi ise aslında sizin data içerisinde bulundurduğunuz değeriniz oluyor.
See the Pen v-bind Kullanımları by Mustafa Çağrı Güven (@mustafacagri) on CodePen.
İşin uzay bilimi karmaşıklığına gelmesini istemediğim için, karmaşık ve anlaşılmaz terimlerden uzak bir şekilde birkaç örnek ile ilermek istiyorum.
Her zamna v-bind’ı kısaltamayız
Eğer ki v-bind ile bind ederken birden fazla attribute’ü (özelliği) etkilemek istiyorsak, v-bind’ı kısaltmadan kullanmak zorundayız. Yani şu şekilde:
<a v-bind="LinkBindIslemi">{{ gidilecekURLTexti }}</a>Burada hem href’i hem de style’ı bir obje yardımıyla kolaylıkla manipüle edebiliriz.
See the Pen Bazen v-bind’ı kısaltmadan kullanmak zorunda olabiliriz by Mustafa Çağrı Güven (@mustafacagri) on CodePen.
Örnekte olduğu gibi, href ile URL’imizi belirliyoruz, style ile de linkimizin nasıl görüneceğini şekillendiriyoruz. Burada dikkat edilmesi gereken en önemli konu ise style içerisinde camel case (ilk harf küçük, sonraki kelimenin ilk harfi büyük) kullanmak zorunda olduğumuzdur. Yani CSS’te olduğu üzere font-size: 36px; değil de, fontSize: 36px; diyoruz.
Classlarda v-bind Kullanımı
Classlar için v-bind’ı :class=”” şeklinde kısaltarak kullanabiliriz.
See the Pen NWRepzZ by Mustafa Çağrı Güven (@mustafacagri) on CodePen.
<h3 :class="{ 'mavi': renkMavi}">renkMavi == true olduğu için .mavi classı çalışacak</h3>Buradaki mantık şu şekilde ilerliyor, eğer ki iki noktanın sağındaki bir Truthy değer (Bakınız: truth value) sağlıyorsa, sol taraftaki değeri classın içerisine yazıyor. Örnek olarak renkMavi bir true değer döndüğü için bunun çıktısı <h3 class=’mavi’>…..</h3> şeklinde olacaktır. Eğer ki true değer dönmeseydi class attribute’ü boş kalacak ve <h3>…..</h3> çıktısını alacaktık.
Daha birçok farklı örnek verebiliriz ancak aklıma gelen v-bind’ın en yoğun kullanımları bu şekilde. Eğer ki aklınıza takılan bir kısım ya da eklemek istediğiniz bir şeyler olursa lütfen yorum kısmında iletmekten çekinmeyin. Bir sonraki yazıda görüşmek üzere…