Setelah kemarin kita berkenalan dengan Framework Vue Js ini, sekarang kita akan mengulas Apa itu Vue Directive. Spoiler dulu nih, Vue Directive adalah salah satu Fitur yang sanget Berfaedah di Vue Js, Vue Directive ini Mempunyai beberapa kegunaan yang akan sangat Berfaedah Begitu kita mengembangkan Website kita.
Mengenal Apa itu Vue Directive
Secara Bahasa, Directive berarti petunjuk, arah, atau perintah.
Akan tetapi dalam Vue js, Directive merupakan Atribut yang berfungsi menjalankan perintah atau Aktualisasi diri Jacascript didalam HTML Biasa.
Biasanya, Directive ini diawali dengan v-. nah sekarang coba Mimin contohkan Vue Directive paling sederhana.
Nah, kalau dilihat diatas Eksis 2 tag yang Mempunyai Vue Directive Adalah v-if. Directive ini akan menampilkan tag apabila bernilai True. Jadi kalau dibuka di Website, maka hanya akan muncul seperti ini
Luar Biasa bukan? nah itu tadi merupakan Teladan Vue Directive paling sederhana. Nah di Artikel Apa itu Vue Directive ini kita akan membahas beberapa Vue Directive lainnya.
Daftar Vue Directive
Nah disini akan Mimin contohkan beberapa Vue Directive beserta kegunaanya masing-masing. Tiap Vue Directive Mempunyai kegunaan yang berbeda.
Directive v-bind
Seperti namanya, v-bind digunakan Demi mengikat elemen HTML yang kita punya. Biasanya v-bind ini mengikat elemen kita dengan Data dari Javascript yang kita miliki. Berikut Teladan simplenya
Nah syntax diatas akan menampilkan sebuah Tombol Link, yang apabila di klik akan mengikuti link yang sudah kita perkenalkan di data, Adalah akan mengarah ke https://duniacoding.info/belajar-vue-js-Demi-pemula-1/.
Directive v-for
Directive v-for ini adalah Directive yang digunakan Demi melakukan Looping didalam HTML kita. Directive ini akan melooping sesuai dengan jumlah yang kita tentukan/banyaknya Data yang kita Looping, berikut contohnya.
Nah syntax diatas akan menghasilkan output
Keren kan? kita Dapat lakukan Looping didalam Bahasa HTML. Nah selain Looping dengan Bilangan yang sudah ditentukan, v-for juga Dapat melakukan Looping Demi Data dari Array yang kita punya. Contohnya seperti ini
Pada syntax diatas, kita Mempunyai Array Mobil yang berisi [‘Toyota’, ‘Avanza’, ‘Xenia’, ‘Lamborgini’]. Nah, kita Dapat mengeluarkan Seluruh Data di Array itu dengan v-for dengan Langkah
Yang harus diingat dar v-for adalah selalu menggunakan v-bind:key Demi memberi tau sistem dengan apa index yang kita gunakan Demi Looping ini.
Directive v-on
Selanjutnya yang kita pelajari di Artikel Apa itu Vue Directive adalah Directive v-on. Sebenarnya directive ini sangat sederhana, Directive ini digunakan Demi Event dalam HTML. Misal Event Click. Penerapannya seperti ini
Directive v-model
Directive ini sebenarnya sudah kita gunakna di artikel sebelumnya. Nah Directive v-model ini biasanya digunakan Demi menyambungkan kode HTML dengan Data yang dimiliki Javascript. Berikut contohnya
Dengan syntax diatas kita akan menampilkan hasil seperti ini
Kerennya v-model ini adalah kita Dapat mengubah tampilan dari HTML tanpa harus melakukan Refresh, coba saja diganti tulisan didalam kotak itu :D.
Directive v-if, v-else-if, v-else
Directive terakhir yang akan kita bahas disini adalah Directive yang Tertentu Demi pengkondisian. Directive ini Berfaedah sekali Begitu kita Membikin Website kedepannya. Berikut contohnya.
Teladan penggunaan v-if
Nah kalau dilihat codingan diatas akan Menampilkan tampilan dari tag
Nah sekarang coba saja ganti nilai seen tersebut dengan false, maka tag
Lanjut.. bagaimana penggunaan dari v-else-if dan v-else? Nah kegunaan dari Directive ini sama dengan Pengkondisian if, else pada Umumnya.
Pada syntax diatas, Diriku memberikan nilai seen adalah 2. jadi yang akan ditampilkan adalah v-else-if dengan Kondisi seen==2.
Nah coba saja ganti nilai seen menjadi Bilangan lainnya, maka tampilan dari HTML kita akan menyesuakan dengan itu.
Konklusi
Nah cukup Tamat disini saja Artikel Apa itu Vue Directive. Vue Directive ini adalah hal yang WAJIB kalian pelajari Begitu Ingin mendalami Vue Js. Demi mempelajari Apa itu Vue Directive dengan lebih Jernih kalian Dapat Menyaksikan Dokumentasi Formal Laravel di https://docs.vuejs.id/v2/guide/index.html.
Tamat disini saja Artikel Apa itu Vue Directive, semoga Bermanfaat ya!