Hallo sobat Newbie, kali ini kita akan melanjutkan pembelajaran VueJS tentang Directive (V-If, V-On, V-Bind) dan List. Jangan lupa dengan lib dari Vue nya
Buatlah file dengan nama directive.html dan tuliskan codenya seperti pada gambar dibawah ini

 V-If
Kemudian jalankan/buka file tersebut pada browser

Directive ini juga tetap memiliki sifat reactive, kita coba buka pada console. Sebagai contoh, jika pada saat runtime, kemudian variable jumlahnya diubah menjadi ’38’ dengan cara menulis perintah vm.suhu = ’38’, maka view akan dirender ulang.


V-On

Kemudian jalankan/buka file tersebut pada browser
Ketika kita klik button 'Antrian' maka akan muncul informasi seperti pada gambar dibawah ini 
no antrian otomatis berkurang.

V-Bind
Selanjutnya kita akan mencoba v-bind dengan contoh kasus memanggil gambar. Tentu yang pertama kita tambahkan terlebih dahulu gambarnya ke dalam project agar bisa di panggil. Lalu tuliskan codenya seperti berikut disini.

Kemudian jalankan/buka file tersebut pada browser
gambar akan beralih pada gambar selanjutnya setelah 5 detik


Menampilkan List Colection Pada Onlineshop
Dalam menampilkan list  produk ini kita akan susun seperti card, agar lebih estetika kita gunakan framework bootstrap, downlaod terlebih dahulu bootstrapnya pada link https://getbootstrap.com 

Pertama kita buat file baru dengan nama product.html, lalu kita tambahkan library dari bootstrapnya.

Sebelum kita mengisi data collection kita tambahkan terlebih dahulu gambar-gambar yang akan kita tampilkan nantinya.

Kemudian isikan data collectionnya seperti berikut yang ditandai kotak hijau.

kita looping data collectionnya pada card seperti berikut.

Untuk merapihkan tampilannya kita tambahkan CSS seperti pada gambar dibawah ini

Jalankan pada browser, maka akan muncul tampilan berikut.
Kita tambahkan fitur total dengan code berikut


 dan tambahkan methodnya

 kemudian jalankan kembali di browser

 ketika kita mengklik beli maka nilai total akan berubah

 Kesimpulannya adalah dengan menggunakan directive maka perubahan pada tampilan tidak memerlukan loading kembali, akan secara langsung berubah atau reaktif.
sedangkan pada list dapat memudahkan kita untuk menampilkan semua colection yang kita miliki, sehingga tidak perlu membuat code satu persatu.