Tutorial Vue JS Konfigurasi Pertama

Tutorial Vue JS Konfigurasi Pertama

Halo temen temen pada tutorial kali ini saya akan membahas mengenai tutorial vue js dari mulai konfigurasi pertama 

Tools yang digunakan

1. Text Editor Saya menggunakan visual studio code

2. Vue JS bisa mengklik link ini 

3. Web Browser

Langkah - langkah

1. Klik link vue js yang sudah di lampirkan di atas maka akan muncul tampilan seperti ini

2. Copy semua script tersebut lalu simpan di folder project dan buatlah struktur folder nya seperti ini

3. Lalu buka file vue.js dan pastekan semua script yang berasal dari link yang terlampir di atas dan akan muncul tampilan seperti ini

4. Lalu buka file index.html dan masukan skrip seperti tampilan di bawah ini

5. Lalu buka file index.html di browser dan akan muncul tampilan seperti ini

6. Lalu buat file baru dengan nama hellovue.html dan masukan script seperti ini

7. Apabila dibuka di browser maka akan muncul tampilan yang sama seperti file index.html

8. Namun karena menggunakan vue.js maka variabel message yang ada di h1 bisa dirubah dengan cara inspect element di browser dan masukan perintah di tab console yaitu vm.message = "Hello" atau bisa disesuaikan dan akan muncul tampilan seperti ini

 9.  Lalu saya akan ubah file Hellovue.html dan akan memasukan variabel mengenai biodata yang terdiri dari Nama, Prodi,  Tahun Angkatan dan Email sehingga memiliki tampilan seperti ini

10. Pada saat dijalankan di browser akan muncul tampilan seperti ini 

11. karena data pada vue js nya masih kosong sehingga akan muncul tampilan tersebut namun saya akan mengisi data tersebut melalui console di browser dan akan muncul tampilan seperti ini

Penjelasan

1. Pada penggunaan vue js diperlukan inisialisasi object baru berbentuk new Vue melalui variabel var 

2. Dan setelah di inisialisasi object vue js selanjutnya adalah menentukan id atau class yang merupakan tempat penyimpanan isi dari object vm yang pada tutorial kali ini disimpan di id app yang di inisialisasi melalui variabel el

3. Lalu di dalam variabel tersebut terdapat data yang berbentuk object yang nantinya dipasang di attribute html yang di tutorial kali ini menggunakan attribute h1 dan h3

4. Lalu pada saat dijalankan maka apabila data di dalam object vue tidak di isi maka akan memiliki tampilan seperti gambar pada langkah 10 

5. Dan apabila ingin mengubah isi dari data yang disimpan di object maka menggunakan tab console di browser dan masukan variabel tempat penyimpanan data yang di tutorial kali ini menggunakan vm sebagai variabel object

6. Lalu masukan data di console setelah memasukan variabel vm.dan isi dari data tersebut sehingga akan muncul seperti tampilan gambar pada langkah 11

Mungkin untuk tutorial kali ini hanya sampai disini saja silahkan dicoba tutorialnya dan mohon maaf apabila ada kekurangan di tutorial ini.

Terima Kasih