Tentang Penggunaan V Bind Pada Vue Js

Belajar lebih banyak tentang penggunaan v-on dan juga v-bind sebagai property pada Vue Js. Selain metode-metode yang kita sudah pelajari dibagian sebelumnya kita pun bisa memberikan attribute-attribute dengan sistem directive pada Vue jsnya. Sebagai contoh saya ingin menampilkan sebuah gambar dengan tag <img> tentu untuk memanggil gambarnya kita bisa menggunakan v-bind: lalu nama attributenya yaitu src sebagai berikut

Jadi v-bind ini adalah salah satu directive yang gunanya untuk menyambungkan attribute apa saja untuk elemen HTML-nya. Lalu saya tulis logo sebagai nilai attribute srcnya

Dan bila dijalankan kita tidak akan dapat hasil gambarnya. Karena nilai srcnya tidak diketahui dia berusaha mencari nama property logo dari object datanya tentu kita harus mendefinisikan property logo ini sebagai object datanya yang nilainya sendiri adalah nama gambar yang ingin ditampilkan.

Maka kalo kita lihat sekarang gambarnya sudah tampil sebagai tag <img>-nya

Tentu teman teman pun bisa menggunakan attribute biasa yang ada di HTMLnya. Jadi ini opsional intinya teman teman bisa melakukan hal seperti itu di dalam Vue js-nnya dan tidak hanya terbatas untuk gambar teman teman bisa menggunakan v-bind untuk semua attribute yang ada dielemen HTMLnya. Teman teman bisa menuliskan titik dua (:bind) sebagai penulisan singkat v-bind-nya seperti berikut

Dan kalo kita reload kita dapat hasil yang sama. Sedangkan untuk v-on kita bisa gunakan tanda simbol (@) sebagai berikut

Jadi itu dia cara penulisan singkat untuk v-on dan v-bindnya. Untuk contoh lain misalnya kita punya beberapa attribute sekaligus didalam elemennya nah v-bind ini bisa melakukan hal itu yaitu dengan memberikan tanda kurung kurawalnya seperti ini

Lalu didalam kita tulis key dan valuenya. Key sebagai nama attribute lalu value sebagai nilai dari attributenya yang kita bungkus dengan tanda kutip sebagai berikut

Tentu attribute satu dengan attribute lainnya kita pisahkan dengan tanda koma. Nah kalo kita tampilkan kode berikut maka kita akan dapat hasilnya seperti ini

Artinya tag <img> punya attribute class dan src sebagai source gambarnya. Itu dia informasi informasi seputar directive pada Vue js.