Menampilkan Halo Dunia Pada Framework VueJS

Di artikel ini kita akan banyak membahas Vue.JS. Apa itu Vue.JS ? vue.js adalah salah satu framework JS yang keren dimana framework ini hampir mirip seperti angular JS yang terdapat fitur data binding dan directive yang telah di sediakan. Untuk mendapatkan saya gunakan bower jika teman teman tahu apa itu bower teman teman artikel berikut ini

link artikel

setelah itu saya gunakan bootstrap untuk layoutnya. Pertama kita buat struktur HTMLnya dan menginclude kan file JS yaitu Vue.JSnya sebagai berikut

dan buat sebuah elemen HTML yang akan di mainkan seperti berikut

Nah untuk membuat data binding dari Vue.js maka kita buat elemen yang memiliki id contohnya sebagai berikut

Kemudian kita buat kode berikut ini yang pertama kita tentukan elemen yang kita ingin tampilkan dan yang kedua adalah mengisi datanya dengan menampilkan Halo Dunia dari Vue.JS dimana kita buat data binding sederhana contohnya sebagai berikut

dan disini kita tampilkan datanya di elemennya dengan menggunakan {{ }} contohnya seperti ini

dimana kode diatas untuk mengeluarkan data binding dari VueJS! kita simpan dan kita jalankan maka akan tampil Halo dunia seperti berikut

Terima Kasih.