Belajar SINGKAT menggunakan VUE JS

Vue.js adalah kerangka kerja JavaScript yang bersifat progresif, bersumber terbuka untuk membangun antarmuka pengguna. Integrasi ke dalam proyek yang menggunakan pustaka JavaScript lainnya mudah dilakukan dengan Vue karena ia dirancang untuk bisa berjalan hanya di beberapa bagian halaman web

1. Buatlah struktur folder seperti di bawah ini :

2. Untuk isi dari vue.js copy paste dari link https://vuejs.org/js/vue.js

3. Ketik kode seperti datadiri.html :

4. Apabila sudah dicoba, jalankan datadiri.html di browser, jika berhasil akan terlihat seperti ini :

Penjelasana Kode

1. Kode dari <script src="lib/vue.js"></script> digunakan untuk mengimport library vue.js dari langkah kedua agar dapat digunakan program kita.

2. Kode yang menggunakan double kurung kurawal seperti {{ Nama }}, {{ Prodi }} dan yang lainnya adalah bentuk variable yang akan digunakan oleh vue.js dan akan dibuat menjadi script.

3. var vm adalah deklarasi dari class vue.js.

4. el:'app' adalah pertanda dari kontrainer yang akan dimanipulasikan oleh vue, di studi kasus ini div dengan id app, <div id="app></div>

5. isi dari data :{...} adalah isi dari variable yang telah dibuat pada poin 2

TERIMAKASIH

Selamat Mencoba!!