Kali ini kita kan membuat sebuah program sederhana dengan membuat data binding dengan textbox pada Vue Js.

Dimana data yang di inputkan langsung tampil hasilnya secara realtime, langsung saja kita mengimplementasikannya, seperti biasa buat terlebih dahulu struktur dasar HTML dan berikan textbox:

Seperti itu ya teman-teman, dan kalian pun bisa menambahkan script untuk Vue.Js nya di file yang berbeda, ataupun di dalam file yang sama. Untuk contoh kali ini saya akan membuat file baru dengan nama apps.js, untuk scriptnya bisa teman-teman ikuti dibawah ini:

 

Dan sebelum kita mencoba menjalankannya pada browser, teman-teman jangan lupa untuk memanggil file apps.js tsb, untuk memanggil file apps.js teman-teman cukup menambahkan script dibawah ini, setelah <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

 

Nah, untuk hasilnya teman-teman bisa cek pada browser yaa, dan jangan lupa untuk save sebelum mencoba pada browser. Semoga bermanfaat