DataBinding dalam Vue.JS
Halo teman teman semua kembali lagi bersama saya , kali ini saya akan melanjutkan kembali membuat artikel mengenai vue.js , Nahh kemarin kita sudah belajar mengenai apa itu vue.js dan bagaimana penggunaan nya . Nahh kali ini kita akan mulai belajar mengenai salah satu fitur di dalam vue.js yaitu data binding .
Salah satu fitur di dalam vue.js adalah reactive data binding system . Nahh seperti apakah itu ? Seperti yang sudah saya pelajari sebelumnya , secara singkat fitur ini dapat diartikan seperti ini : fitur ini dapat menyimpan data kalian seperti variabel , array , value dll dan tersinkronisasikan dengan DOM tanpa anda harus melakukan apa apa (langkah tambahan) .
Pada artikel sebelumnya kita sudah belajar bagaimana menampilkan text Hello World dengan menggunakan Vue.js bukan ? Nahh bagi yang belum tau bagaimana syntax nya adalah seperti di bawah ini :
Pada contoh di atas kita dapat melihat bagaimana cara data binding pada vue bekerja , yaitu bagaimana vue akan memperbaharui DOM anda seketika saat nilai pada variabel anda diubah .
Jadi kita beri contoh semisal kita mengubah nilai pada variabel message menjadi ‘Hello’ maka data akan diperbaharui pada DOM sehingga menyimpan variabel dengan value yang sudah kita ubah tadi yaitu ‘Hello’.
Mengenal Perintah V-bind untuk data binding pada Vue.js
Sebelumnya kalian pasti bertanya tanya apakah itu v-bind ? , v-bind adalah salah satu perintah di dalam vue.js yang di gunakan untuk melakukan binding ke dalam HTML . Secara sederhana dapat di jelaskan seperti ini jika kita ingin melakukan binding code javascript kita ke dalam sebuah syntax HTML cara nya adlaah dengan menggunakan syntax v-bind .
Syntax v-bind dapat di tulis seperti “v-bind:” atau dapat kita singkat hanya dengan “ : “ saja.
Sebagai contoh adalah seperti kode di bawah ini :
dari kode di atas dapat kita lihat bahwa kita ingin menambahkan value pada attribute href , menggunakan data url yang terdapat di dalam javascript . data url yang dimaksud adalah “http://tedoharisc.com” .
Syntax di atas menggunakan :href = “url” , namun ingat kita juga bisa mengubahnya dengan v-bind:href = “url”
Nahh sekian dulu pembahasan mengenai data binding di dalam Vue.js , setelah ini saya akan mengeluarkan artikel mengenai two ways databinding . So … jangan sampai ketinggalan ya kawan — kawan , jangan lupa juga untuk mengikuti story saya apabila ingin belajar mengenai Vue.js . See you on next article .
