Hai teman-teman Semuanya, apa kabar? semoga tetap dalam keadaan sehat.. kita lanjut lagi pembelajaran kita tentang vue js, pada tutorial sebelumnya kita telah mencoba mencetak hello word pada browser dengan menggunakan framework vue js, kali ini kita masih sedikit akan membahas tentang vue js, kita akan belajar mengenal two way data binding pada vue js.

Apa itu two way data binding?  adalah sebuah alur atau mekanisme yang dapat merubah data dari sisi view ( front end ),  begitu juga sebaliknya dari segi view atau front end dapat merubah sisi front dengan data yang berhubungan, dari sekian banya framework javascript, vue js adalah salah satu framework javascript yang menyediakan konsep ini, dengan ini kita dapat membuat sebuah form isian dengan dinamis dan dapat mengubah model data yang diinginkan.

Untuk contoh kasusnya silahakan teman-teman buat sebuah file html dan ketikan script berikut ini:

saya mebuat sebuah div dengan id form, dimana didalam div tersebut saya membuat sebuah inputan text dan saya memberikan atribut v-model bawaan dari vue itu sendiri,

sekarang coba teman-teman tambahan script ini untuk menjalankan vungsi hiewnya,

Perlu diingat yang diperhatikan adalah atribut v-model yang menjadi atribut dari inputan dan event-name, untuk mencetaknya silahakan teman-teman tambahkan script ini pada element p diatas :

jika teman-teman save keseluruhan script diatas maka jika teman-teman jalankan pada browser maka apapun yang kita ketik pada inputan akan langsung tercetak, ini dikarenakan pada saat kita mengetik pada bagian form inputan event.text sedang diubah dan secara reaktif, Vue juga akan mengubah sisi view yang memuat data tersebut.

Oke teman-teman untuk tutorial kali ini cukup samapai disini dulu, semoga bermanfaat

Terima kasih.