#1 Pengenalan Vuejs

Apa itu VueJS?

VueJS adalah framework javascript untuk bagian user-interface (front end) dalam aplikasi web.

Tools yang dibutuhkan

1. Code Editor
2. Web Browser
3. Koneksi internet (opsional)

Membuat Aplikasi Sederhana dengan Vuejs

Instalasi Vuejs

File Vuejs terbagi menjadi dua tipe, yaitu Development Mode dan Production Mode. Perbedaannya jika Development Mode, ukuran file Vuejs tidak dikompres. Sebaliknya, Production Mode ukuran file Vuejs dikompress.

Untuk tutorial pembuatan aplikasi sederhana dengan vuejs, ikuti langkah-langkah berikut ini

Buat struktur folder seperti gambar dibawah ini

Penjelasan : Root folder bernama Tugas 2, dalam folder tersebut, terdapat file index.html dan folder lib, dalam folder lib terdapat file vue.js. file vue.js didapatkan dari https://vuejs.org/js/vue.js.

Selanjutnya, samakan codingan index.html seperti gambar dibawah ini

Penjelasan : 

1. Elemen div#app adalah sebagai tanda inisiasi objek Vue
2. Empat kurung kurawal "{{ nama_variabel }}" adalah sebagai penanda/pemanggilan variabel/key yang telah dibuat dan akan dimanipulasi oleh Vue

Penjelasan : 

1. Pada baris kode 38 - 39, kode tersebut berfungsi untuk membuat instansi/objek baru untuk class Vue. Objek tersebut disimpan kedalam variabel yang bernama vm. el berfungsi untuk target(hasil manipulasi vue) elemen pada html.
2. Dalam data, terdapat key yang bernama message dan child key yang terdapat name, prodi, angkatan dan email.

Uji Reaktifitas Vue

Buka index.html di web browser, lalu masuk ke console

pada console, ketikkan vm.msg.name = 'new value' lalu enter. Pada tampilan browser, value nama akan berganti secara real-time tanpa harus me-refresh terlebih dahulu.