Vue JS Directive & List

Vue JS Directive & List

Pada tutorial ini akan membahas mengenai fitur vue js yaitu directive dan list silahkan di simak yah

Directive

Directive adalah atribut html yang ditambahkan atribut vue js sehingga vue js bisa melakukan perubahan pada atribut html tersebut. dan biasanya di tandai dengan v- seperti v-if untuk fungsi if dan juga v-for untuk looping seperti foreach.

Untuk pembuatan directive pertama buatlah file baru dan masukan kode seperti ini

Pada contoh kode di atas memasukan directive v-if  untuk kondisi dan pernyataan dan menggunakan v-for untuk melakukan looping pada foreach dan menggunakan v-on:click untuk melakukan event handler pada button

dan apabila dijalankan maka akan muncul tampilan seperti ini

apabila di klik button nya maka akan muncul pesan sama seperti yang ditulis pada v-on:click

List

List pada vue js berfungsi sebagai pembuatan data berbentuk array atau object yang datanya lebih dari satu dan akan ditampilkan ke dalam atribut html 

untuk pembuatan nya buatlah file baru namun pada list kali ini akan membuat sebuah toko online yang menampilkan produk yang di jual di toko online tersebut

untuk template nya menggunakan framework css bootstrap 

setelah membuat file baru masukan kode seperti ini

Dan apabila ditampilkan maka akan muncul tampilan seperti ini

Kesimpulan : pada directive maka setiap atribut html yang dilengkapi directive maka disitu vue js bisa mengolah dari atribut html dan pada list object yang ditampilkan pada html lebih dari satu dan bisa menampilkan banyak data dengan template yang sama

Ok mungkin untuk tutorial kali ini hanya akan menjelaskan mengenai directive dan list terima kasih dan mohon maaf apabila ada kekurangan