DIRECTIVE DAN LIST DI VUE.JS

Maret 17, 2020

DIRECTIVE DAN LIST DI VUE.JS

kali ini kita akan melanjutkan belajar mengenai Vue.js dengan menggunakan Directive dan list
di vue.js terdapat beberapa macam directive sebelumnya mari berkenalan dulu dengan directive dan list.

Directive dapat di artikan juga attribut intruksi atau pengarahan jadi ketika kita sudah punya data dan bagaimana data itu diolah harus seperti apa untuk pemilihan munculnya kita perlu mengarahkannya dengan beberapa intruksi yang disediakan di vue.js seperti:

1. V-IF
2. V-ON

Kita akan membuat beberapa tutorial mengenai directive vue.js sebagai berikut. lets go.

Pertama kita buat file htmlnya dengan nama file directive.html dan disini aku buat nama datanya kecocokan hehe. jadi fungsi dari directive v-if sebagai pilihan diantara beberapa kondisi.
tuliskan kode seperti dibawah ini

dan setelah itu coba jalanka di web browsernya maka hasil kan terlihat seperti ini

kenapa munculnya biasa?? karena aku memasukan nilai data kecocokannya dengan nilai "B" terlihat seperti pada line 26 di script sebelumnya dan jika aku ganti nilainya jika kita panggil nilai di console dengan menuliskan vm.kecocokan= "nilai" . nilai yang aku masukan "S" yang berisikan message Suka.

setelah itu aku mengganti nilainya menjadi "T" maka hasilnya akan berisikan Tidak suka

selanjutnya menggunakan directive v-on, jadi directive v-on adalah attribute yang mengintruksikan dan mengarahkan pada sebuah event.

dan buat file bernama v-on.html setelah itu menuliskan seperti kode berikut.

setelah itu lakukan tes di web browser maka akan menghasilkan seperti berikut

jadi penjelasan dari directive v-on ini , ketika kita mengkli button tambah maka akan mucul berapa kali kita menekan button tambah di atas button tersebut.
dan jika kita menekan button klik untuk info terbarunya akan muncul dialog box yang sudah kita isi pesan yang ingin di sampaikan sebelumnya di script.
setelah itu ada link akses menuju situs kemenkes dan jika di lik kita langsung terakses untuk mengunjungi situs tersebut.

Selanjutnya membuat online shop menggunakan list

pertama kita masukan kode seperti berikut