Untuk Menampilkan data dalam Vue.Js terdapat beberapa cara dan metode, diantaranya adalah declarative rendering, directive v-text, dan directive v-html, yang masing-masing memiliki karakter yang berbeda, mari kita bahas satu persatu cara menampilkan data dalam vue.js dengan berbagai variasinya.

Cara pertama adalah dengan menggunakan Mustaches. Entah kenapa Vue.Js menamakan ini dengan cara Mustache. Untuk menggunakan cara Mustaches itu cukup mudah, yaitu kita tinggal panggil variable datanya dan letakkan di dalam sebuah kurung kurawal.

Dalam contoh kali ini kita akan menampilkan text “Selamat pagi Juara” yang merupakan isi dari variable text, kita panggil ‘text’ nya maka text “Selamat pagi Juara” akan muncul, berikut contoh scriptnya:

 

Karena ini adalah output, maka letakkan script tersebut di dalam parent atau tag HTML yang sudah kita sediakan, pada contohnya saya akan memasukkannya di dalm tag <div id=”app”> dan jangan lupa tag penutupnya yaitu </div> di file HTML kita. Berikut contoh scriptnya:

Karena disini saya membuat file apps.js, berikut code script apps.js nya:

 

Keuntungan menggunakan cara Mustache untuk menampilkan data

Jika membahas apa bedanya dengan langsung diketik saja pada tag HTMLnya secara langsung daripada menggunakan Cara Mustaches ini?

Jawabannya adalah data dan DOM akan terhubung, dan semuanya akan menjadi reactive. jika kalian mau membuktikan, kalian bisa buka pada browser lalu kita inspect element dengan cara mengetik perintah berikut pada tab Console: app.text, lalu tekan tombol enter, maka text ‘Selamat pagi Juara’ akan muncul. (dimana app adalah nama variable tempat objek Vue.Js diinstansiasi, dan text adalah nama variable untuk text ‘ Selamat pagi Juara’).

Dan semisal kalian mau mengubah isi dari variable text. Pada pada tab Console di browser kalian, cukup beri perintah: app.text = ‘Semangat pagi’. Maka variable text yang awalnya berisikan text ‘Selamat pagi Juara’ berubah menjadi ‘Semangat pagi’. Sehingga variable text pada Vue.Js menjadi dinamis yah teman-teman