Hello VueJS, One Way Binding

Mungkin tidak semua developer merasakan sulitnya mempelajari javascript akhir-akhir ini. Saya salah satu orang kesulitan mempelajari javascript yang kekinian. Tapi ketika saya mencoba laravel versi 5.3 dan mengetahui ada framework js baru bernama VueJs ternyata tidak sesulit yang dibayangkan.

“Vue is what I always wanted in a JavaScript framework. It’s a framework that scales with you as a developer. You can sprinkle it onto one page, or build an advanced single page application with Vuex and Vue Router. It’s truly the most polished JavaScript framework I’ve ever seen.” — Taylor Otwell

Untuk mulai menggunakan VueJs ada beberapa opsi installasi yaitu standalone version, install dengan bower, install dengan npm dan include langsung dari CDN, untuk tutorial ini saya akan menggunakan include langsung dari CDN.

https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js

Oke, kita mulai dari yang paling dasar, Data Binding. Kita akan membuat aplikasi sederhana yang akan mengizinkan kita menulis pesan dan menampilkannya secara langsung di browser secara realtime.

script sederhana vuejs

Saya menggunakan <div> tag dengan id=”app” sebagai referensi agar Vue mengetahui block mana yang akan digunakan. Vue tidak akan mendeteksi apapun diluar block tersebut. gunakan el option untuk set target yang di inginkan.

Kemudian deklarasikan data pada variable object data didalam Vue constructor. Untuk menampilkan “message” kita hanya perlu membungkus variable message didalam double curly bracket.

Sekian! Gampang kan?