Hallo Coder, sekarang kita akan membahas mengenai Cara Menggunakan Mustaches di VueJS setelah sebelumnya kita membahas mengenai Mengenal VueJS. Mustaches di VueJS merupakan cara untuk menampilkan data, untuk cara penggunaannya sangat simple banget kita hanya perlu meletakan variablenya seperti ini {{nama_variable}} nama variable selalu di apit dengan double kurung kurawal.

Dalam Program Pertama kita akan membuat Hello World!! (Ledgen banget di semua bahasa pemograman). yang akan kita masukan pada variable pesan saat kita paggil {{pesan}} maka akan keluar tulisan Hello World!!.

untuk mencobanya silahkan ketik source code di bawah ini :

Sekarang mari kita bahas satu persatu agar dapat memahami dengan lebih baik, Coba lihat script dibawah ini.

Aplikasi yang akan kita uat terletak pada bagian div di atas, mengapa harus div tidak yang lain ? karena div tidak berisi format apapun, kemudian coba lihat ada code id=”app” merupakan atribut dalam HTML, id disini sebagai penanda yang namanya tidak boleh sama antara satu id dengan id lainya pada contoh di atas kita menamakan app untuk id nya HTMLnya sudah beres sekarang kita kaitkan dengan Vue. mari lihat code dibawah ini

Script dia atas dapat diartikan sebagai berikut, kita akn buat Vue baru dengan element(el) yang di kaitka dengan #app , dan kita membuat sebuah variable baru bernama pesan dengan isi Hello World!! , script dia atas kita namakan App.js. sekarang coba buka filenya.

Cuman gitu aja ? ets tenang dulu coba klik kanan->inspect elemen->console lalu ketik app.pesan di console maka akan keluar hello world!! terus coba ketik kan lagi app.pesan = “hello vueJS” , berubah bukan tulisan yang ada di layar ?

Wow berubah dinamis datanya, nah itulah yang di sebut dengan reactive dan VueJS mendukung akan itu. Pengen tau lebih lanjut lagi tunggu di tutorial selanjutnya yah. Salam Coder !!