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.

5 Maret 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat