Belajar Tentang Binding Expresions Pada Vue Js

Pada bagian ini kita akan belajar tentang Binding Expresions atau sering disebut two way data binding dimana bila kita mengubah satu object yang sudah kita tentukan maka dia akan otomatis berubah secara realtime atau live. Langsung saja kita mulai yang pertama saya akan simpan object Instance Vuejsnya kedalam variabel seperti ini

artinya variabel tersebut adalah Vue Objectnya. Lalu kita buka console browsernya kita akan menulis nama objectnya yaitu vObj titik lalu di ikuti nama property apa yang akan kita ubah. Misalnya saya beri nilai namanya

Teman teman perhatikan secara otomatis bagian namanya akan berubah sesuai yang kita tulis dibagian consolenya tentu tanpa mereload halamannya dan hal ini akan berlaku sama ketika kita ingin mengubah property yang lainnya. Tentu kita tidak akan melakukan hal sesimple itu didalam consolenya yang jelas data object itu dapat kita ubah. Lalu ada beberapa cara penulisan bila saya berikan simbol tanda (*) didalam bagian templatingnya.

dan bila saya mencoba mengubah nilai object tersebut maka nilainya tidak berubah kenapa ? karena tanda (*)  ini memberi tahu ke browsernya kalo nilai property ini tidak dapat diubah artinya nilainya tetap dan satu penulisanya lagi kita juga bisa menyimpan tag htmlnya dengan menuliskan tiga buka tutup kurung kurawalnya

tentu nilai property elemen tersebut belum kita buat. Untuk itu dibagian data kita tambahkan property baru yang kita pisahkan dengan koma untuk menuliskan key yakni elemen yang nilainya sendiri seperti berikut

Maka hasilnya akan dirender sesuai dengan elemen HTML yang kita tentukan. Tentu elemennya bisa lebih dari satu. Selain itu kita bisa meletakkan sebuah expresion yang mana kita akan mengambil nilai property namanya lalu menggabungkan string lainnya seperti berikut

Jadi kita bisa menambahkan sesuatu seperti menggabungkan string dengan tanda kutip atau juga menjumlahkan sebuah nilai. Contoh lainnya misalnya kita punya satu property yang nilainya boolean yang saya tulis property active yang nilai false

yang mana kita bisa buat sebuah ternary operator yang kita tulis didalam templatenya yaitu dengan tanda tanya sebagai nilai true sedangkan titik dua sebagai nilai false

Kode diatas artinya bila nilai property active ini true maka kita akan berikan class bg-info untuk warna biru sedangkan bila nilainya false maka kita berikan class bg-danger untuk warna merah.

artinya kita berhasil menjalankan javascript expresions atau pun teman teman juga bisa menjalankan metode murni dari javascript didalam sistem templatenya. Jadi bila ada metode simple atau hal hal kecil yang mau kita lakukan tentu kita bisa lakukan langsung didalam sistem templatingnya. Terima kasih