Praktikum Sederhana Vue Js

Dalam blog ini, akan dijelaskan mengenai praktikum sederhanan Vue Js. Berikut praktikum sederhana mengenai Vue JS :

Instalasi dan Konfigurasi Vue JS

1. Buat file vue.js dalam struktur folder seperti berikut. Simpan dalam htdocs di xampp.

2. Buka link pada browser https://vuejs.org/js/vue.js copy semua script yang ada pada link tersebut lalu paste pada file vue.js dan save.
 

3. Instalasi Vue Js telah selesai

Mencoba Vue Js

1. Buat File html hello.html simpan dalam folder vue di htdocs. Codenya seperti berikut :

2. Jalankan pada browser dengan membuka alamat localhost/vue/hello.html maka hasilnya akan seperti berikut :

3. Anda dapat merubah isi halaman "Hello World" dalam Inspect Element di halaman webnya dengan cara seperti berikut

Maka secara otomatis kalimat yang ada dalam halaman web akan terubah tanpa harus merubah didalam script.

Sekarang kita akan mencoba membuat biodata sederhana dalam web dengan Vue JS.

Buat file baru html beri nama biodata.html, Codenya seperti berikut :

Jalankan pada browser dengan buka alamat lohalhost/vue/biodata.html, maka hasilnya akan seperti berikut :

Anda juga dapat merubah isi biodatanya dalam Inspect Element seperti berikut :

Selesai.