Directive dan List Vue.js
Directive dan List Vue.js
Hallo teman-teman, kali ini kita akan membahas directive dan list pada vue.js. Masih dalam project yang sama, buatlah sebuah file baru dengan nama directive.html dan tuliskan codenya seperti berikut.
v-if
Sekarang jalankan pada brosernya maka akan muncul tampilan berikut.
Sekarang coba ganti data jumlahnya.
Lalu jalankan kembali browsernya, maka akan muncul tampilan berikut.
Directive ini juga tetap memiliki sifat reactive. Sebagai contoh, jika pada saat runtime, kemudian variable jumlahnya diubah menjadi ’75’ dengan cara menulis perintah vm.nilai = ’75’, maka view akan dirender ulang.
v-on
Kali ini kita akan mencoba event v-on, ada banyak seklai event-event di dalam vue.js ini, kali ini kita hanya mencoba event onclick.
Masih dalam file yang sama, tambahkan script berikut.
Ketika button di klik akan memunculkan alert konfirmasi, silahkan jalankan pada browser dan lihat hasilnya.
Ketika button ok di klik, maka hasilnya berikut.
Ketika button cancel di klik, maka hasilnya berikut.
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.
Pada attribute v-bind tersebut kita menambahkan class center dan src logo, dimana logo tersebut kita definisikan pada property data di vue js untuk memanggil source imagenya.
Untuk class centernya kita tambahkan saja css agar posisi gambar berada di tengah.
Lalu jalankan pada browser.
Menampilkan data online shop
Kali ini kita akan menampilkan data dari sebuah produk seperti online shop dengan menggunakan list dalam bentuk collection.
Dalam menampilkan list produk ini kita akan susun seperti card, agar lebih rapih kita gunakan framework bootstrap, downlaod terlebih dahulu bootstrapnya pada link https://getbootstrap.com/docs/4.4/getting-started/download/.
Pertama kita buat file baru dengan nama onlineshop.html, lalu kita tambahkan library dari bootstrapnya.
Kemudian buka dokumentasi dari bootstrap dan kita cari contoh untuk menampilkan card, lalu copykan pada file.html kita.
Ketika kita jalankan pada browser maka tampilannya akan seperti berikut.
Sebelum kita mengisi data collection kita tambahkan terlebih dahulu gambar-gambar yang akan kita tampilkan nantinya.
Kemudian isikan data collectionnya seperti berikut.
kita looping data collectionnya pada card seperti berikut.
Jalankan pada browser, maka akan muncul tampilan berikut.
Kesimpulannya adalah directive merupakan property khusus yang ditambahkan pada html untuk dilakukan berbagai macam tindakan seperti v-if, v-on, v-bind, dan masih banyak lagi.
Sementara list merupakan data yang ditampikan dalam bentuk daftar, pada contoh kasus online shop tersebut kita menampilkan gambar, nama produk, deskripsi, dan harga yang di tampilkan dari data collection.
Cukup sekian tutorial kali ini, semoga bermanfaat.
Comments
Post a Comment