Pada tutorial ini akan membuat beberapa contoh program menggunakan Vue.js
A. Siklus object Vue.
B. Template Vue yang menggabungkan property template, data raw dan data attribute.
C. kalkulator sederhana
Membuat Program
A. Siklus Vue
Create
1. Buat file html baru
2. kemudian tambahkan script di dalam body
Id "create" disini akan dijadikan penanda dalam vue untuk menampilkan data di dalam h1 tersebut. dan {{ message }} digunakan untuk menampilkan data message pada variabel create.
3. dipalaing bawah body buat seperti ini
4. kemudian test di browser
Pada gambar diatas hook beforecreated dapat mengakses variable message, tetapi hasilnya akan undifined karena filenya belum di generate oleh si vue dan sebaliknya Created akan menampilkan hasil dari variabel message, karena telah di generate.
Mount
1. kita tambah h1 kembali di body & tambah varibale baru di script
Kode diatas akan mencoba mengakses dengan menggunakan fungsi bawaan js, yaitu textContent. textContent ini berfungsi untuk menampilkan konten teks yang ada di dalam el.
2. kita coba di browser
kita lihat sebelum mount data yang ditampilkan adalah html murni yang belum di generate oleh vue, setelah di mount dan di generate oleh vue data dalam message akan dimunculkan.
update
1. lanjut kita tambah kembali h1 di body dan tambahkan variabel baru di script
Untuk mengujinya kita perlu sebuah perintah untuk mengubah variable message.
Tambahkan satu baris code berikut dibawah objek vue :
update.message = 'Hasil Update'
2. Test di browser
Sebelum diperbaru data di dalam message berisi "updated" tetapi setelah di perbaharui data menjadi "Hasil Update"
Destroy
1. Tambahkan kembali sebuah h1 dengan id "destroy" dan tambahkan vaaribale baru bernama destroy
2. Test menggunakan browser
B. Template Vue yang menggabungkan property template, data raw dan data attribute.
1. Buat file html baru kemudian buat seperti ini
Pada kode diatas kita mempunyai template yang berisi tag html h1, yang akan menampilkan teks message, h1 juga mempunyai v-bind:class dengan nama class_h1 yang diambil dari data, variable class_h1 ini mempuyai value title yang artinya class_h1 sama dengan title jadi pada tag h1 ini akan memanggil class title di dalam css, dan hasilnya akan di render pada div id=txt.
2. Hasil di browser
C. kalkulator sederhana
1. Buat file html baru kemudian buat seperti ini
Pada kode diatas nilai awal variable n1, n2 dan hasil adalah 0, dan ketika salah satu button di klik sebagai contoh button tambah, akan memanggil method tambah(), pada method tambah() akan mengubah variabel hasil dari penjumlahan variabel n1 dengan n2, sebelumnya kita bungkus terlebih dahulu variabel n1 dan n2 dengan parseInt(), parseInt ini untuk mengubah String menjadi Integer.
2. Hasil test browser
Hasil percobaan 2 + 3 = 5
0 Komentar