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

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-1

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

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-2

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.

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-3

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

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-4

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

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-6

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

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-7

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

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-8

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

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-9

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.

Belajar-Tentang-Binding-Expresions-Pada-Vue-Js-24-03-2017-10

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

24 Maret 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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat