Menampilkan Data Menggunakan Vue

Langkah Pertama buka link berikut :  https://github.com/vuejs/vue/releases. yaitu sebagai library javascript ke HTML sebelum menggunakannya.
Kemudian kita download source code berbentuk zip yang berada dalam assets.

Atau kita bisa membuka file tersebut klik link berikut https://vuejs.org/js/vue.js

maka akan muncul tampilan seperti berikut :

Sebelum menyimpan sintaks tersebut pastikan kalian sudah membuat folder bernama " vue.ex/lib" kemudian isi sintak tadi kasih nama file dengan vue.js.

Kemudian kita buat HTML menampilkan " Hello Word!"

Setelah itu kita simpan file tersebut dengan nama " helloword.html"

Jika berhasil maka tampilan akan seperti berikut :

Kemudian kita coba vue nya. isikan sintak seperti berikut :

PENTING : Line 8 (id) nya harus sama dengan line 13 (el), kemudian didalam tanda kurawal 2 "{{ }}" line 9 harus sama dengan properti di line 15

Dan jika berhasil maka tampilannya akan seperti berikut :

Kemudian untuk mencobanya kita klik kanan pada browser, lalu klik inspect kemudian klik console.
Kemudian ketik : nm.nama = " Muhamad Rizal"
[nama variabel].[nama variabel dalam kurung kurawal 2] = " nama yang akan di isi "

seperti pada gambar berikut :

Tanpa Kita Refresh maka tampilan akan langsung berubah. Dan itu membuktikan berhasil.


KESIMPULAN 

Dengan adanya vue dapat merubah isi dari html tersebut tanpa masuk kedalam kodingan yang sebenarnya. Cukup rubah didalam browser.