Vue.js #03

Pada tutorial kali ini kita akan membuat program Vue.js yaitu mengenai Directive dan List. Dan studi kasus yang akan dibuat pada tutorial ini adalah : 
A. Membuat penerapan directive.
B. Membuat List Collection yang menampilkan data produk onlineshop.

A. Membuat Penerapan Directive

1. V-IF

- Buat file baru bernama v-if.html
- Ketikan seperti dibawah ini:

- Jalankan di browser

- Kita coba ubah variabel hewan dengan perintah vm.hewan = "karnivora", maka tampilannya akan berubah seperti ini

2. V-ON

- Buat file baru dengan nama v-on.html
- Ketikan seperti dibawah ini :

- Jalankan di browser

3. V-BIND

- Buat file baru bernama v-bind.html
- Siapkan 2 atau lebih gambar didalam folder projet yang sama
- Ketikan kseperti dibawah ini :

- Pada code diatas, atribut src mem-binding variabel imageSrc, jadi nilai atribut src mengikuti nilai imageSrc.
- Jalankan pada browser

- Dalam 3 detik gambar akan berganti

- Setelah itu gambar akan berganti sekali lagi

B. Membuat List Collection yang menampilkan data produk onlineshop.

- Kita akan membuat online shop baju Polo
- Buat file dengan nama olshop.html designya bisa disesuaikan dengan keinginan masing masing

- Jalankan pada browser