Pada tutorial kali ini saya 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.
Pembuatan Program :
A. Membuat penerapan directive
1. v-if
- Pertama tambahkan file baru dengan nama v-if.html
- Isikan dengan code berikut :
- Kemudian coba jalankan pada browser. Maka akan tampil seperti berikut :
- Directive ini juga tetap memiliki sifat reactive. Sebagai contoh, jika pada saat runtime, kemudian variable umurnya diubah 35 dengan cara menulis perintah vm.umur= 35 pada console, maka viewnya akan dirender ulang.
2. v-on
- Pertama tambahkan file baru dengan nama v-on.html
- Isikan dengan code berikut :
- Kemudian jalankan code tersebut di browser.
- Directive ini juga dapat digunakan untuk memanggil methods pada object vue. Methods merupakan salah satu property dalam objek vue sebagaimana data dan el yang dapat berisi kumpulan fungsi yang digunakan pada aplikasi.
3. v-bind
- Pertama tambahkan file baru dengan nama v-bind.html
- Sediakan 2 buah gambar yang disimpan di dalam satu folder project yang sama
- Isikan dengan code berikut :
- Pada contoh tersebut, atribut src mem-binding variable imageSrc, sehingga nilai dari atribut src tersebut mengikuti nilai dari variable imageSrc.
- Kemudian jalankan lagi pada browser.
- Dalam 5 detik, maka gambar akan berubah menjadi seperti berikut.
B. Membuat List Collection yang menampilkan data produk OnlineShop
- Disini saya akan menampilkan produk online shop jersey sepak bola
- Pertama buat file baru dengan nama onlineshop.html, kemudian isikan code berikut :
- Di dalam kode diatas saya menambahkan framework bootstrap untuk mempercantik tampilan
- Coba jalankan pada browser, dan akan tampil seperti ini :
- Untuk menampilkan gambar jersey menggunakan kode <img class="w-75" :src="jersey.image">. Supaya nilai dari atribut src dari elemen image menjadi dinamis sesuai dengan data jerseys, maka kita perlu perlu menambahkan directive v-bind pada atribut tersebut. v-bind:src atau disingkat menjadi :src.
A. Membuat penerapan directive.
B. Membuat List Collection yang menampilkan data produk onlineshop.
Pembuatan Program :
A. Membuat penerapan directive
1. v-if
- Pertama tambahkan file baru dengan nama v-if.html
- Isikan dengan code berikut :
- Kemudian coba jalankan pada browser. Maka akan tampil seperti berikut :
- Directive ini juga tetap memiliki sifat reactive. Sebagai contoh, jika pada saat runtime, kemudian variable umurnya diubah 35 dengan cara menulis perintah vm.umur= 35 pada console, maka viewnya akan dirender ulang.
2. v-on
- Pertama tambahkan file baru dengan nama v-on.html
- Isikan dengan code berikut :
- Kemudian jalankan code tersebut di browser.
- Directive ini juga dapat digunakan untuk memanggil methods pada object vue. Methods merupakan salah satu property dalam objek vue sebagaimana data dan el yang dapat berisi kumpulan fungsi yang digunakan pada aplikasi.
3. v-bind
- Pertama tambahkan file baru dengan nama v-bind.html
- Sediakan 2 buah gambar yang disimpan di dalam satu folder project yang sama
- Isikan dengan code berikut :
- Pada contoh tersebut, atribut src mem-binding variable imageSrc, sehingga nilai dari atribut src tersebut mengikuti nilai dari variable imageSrc.
- Kemudian jalankan lagi pada browser.
- Dalam 5 detik, maka gambar akan berubah menjadi seperti berikut.
B. Membuat List Collection yang menampilkan data produk OnlineShop
- Disini saya akan menampilkan produk online shop jersey sepak bola
- Pertama buat file baru dengan nama onlineshop.html, kemudian isikan code berikut :
- Di dalam kode diatas saya menambahkan framework bootstrap untuk mempercantik tampilan
- Coba jalankan pada browser, dan akan tampil seperti ini :
- Untuk menampilkan gambar jersey menggunakan kode <img class="w-75" :src="jersey.image">. Supaya nilai dari atribut src dari elemen image menjadi dinamis sesuai dengan data jerseys, maka kita perlu perlu menambahkan directive v-bind pada atribut tersebut. v-bind:src atau disingkat menjadi :src.
0 Komentar