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

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-1

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

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-2

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.

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-3

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

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-4

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

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-5

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

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-6

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

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-7

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

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-8

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

Tentang-Penggunaan-V-Bind-Pada-Vue-Js-23-04-2017-9

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

23 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat