{"id":1291,"date":"2022-04-22T16:00:00","date_gmt":"2022-04-22T09:00:00","guid":{"rendered":"https:\/\/duniacoding.info\/?p=1291"},"modified":"2022-04-26T11:44:42","modified_gmt":"2022-04-26T04:44:42","slug":"belajar-vue-js-apa-itu-vue-directive","status":"publish","type":"post","link":"https:\/\/duniacoding.id\/blog\/belajar-vue-js-apa-itu-vue-directive\/","title":{"rendered":"Belajar Vue js #2 : Apa itu Vue Directive?"},"content":{"rendered":"\n
\"apa-itu-vue-directive\"<\/figure>\n\n\n\n

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 berguna di Vue Js, Vue Directive ini memiliki beberapa kegunaan yang akan sangat berguna saat kita mengembangkan Website kita.<\/p>\n\n\n\n

Mengenal Apa itu Vue Directive<\/h2>\n\n\n\n

Secara Bahasa, Directive berarti petunjuk, arah, atau perintah.
Akan tetapi dalam Vue js, Directive <\/code>merupakan Atribut yang berfungsi menjalankan perintah atau ekspresi Jacascript didalam HTML biasa. <\/p>\n\n\n\n

Biasanya, Directive ini diawali dengan v-<\/code>. nah sekarang coba Mimin contohkan Vue Directive paling sederhana.<\/p>\n\n\n

\n     <div id="app">\n        <h1 v-if="true">Terlihat<\/h1>\n        <h1 v-if="false">Tidak Terlihat<\/h1>\n    <\/div>\n    <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js"><\/script>\n    <script>\n        var app = new Vue({\n            el: '#app',\n        })\n    <\/script>\n<\/pre><\/div>\n\n\n
Nah, kalau dilihat diatas ada 2 tag <h1> <\/code>yang memiliki Vue Directive yaitu v-if<\/code>. Directive ini akan menampilkan tag <h1><\/code> apabila bernilai True<\/code>. Jadi kalau dibuka di Website, maka hanya akan muncul seperti ini<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ajaib bukan? nah itu tadi merupakan Contoh Vue Directive paling sederhana. Nah di Artikel Apa itu Vue Directive ini kita akan membahas beberapa Vue Directive lainnya. <\/p>\n\n\n\n
Daftar Vue Directive<\/h2>\n\n\n\n
Nah disini akan Mimin contohkan beberapa Vue Directive beserta kegunaanya masing-masing. Tiap Vue Directive memiliki kegunaan yang berbeda.<\/p>\n\n\n\n
Directive v-bind<\/h3>\n\n\n\n
Seperti namanya, v-bind<\/code> digunakan untuk mengikat<\/code> elemen HTML yang kita punya. Biasanya v-bind ini mengikat elemen kita dengan Data dari Javascript yang kita miliki. Berikut contoh simplenya<\/p>\n\n\n
\n<body>\n    <div id="app">\n        <a v-bind:href="link">Link<\/a>\n    <\/div>\n    <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js"><\/script>\n    <script>\n        var app = new Vue({\n            el: '#app',\n            data: {\n                link: 'https:\/\/duniacoding.info\/belajar-vue-js-untuk-pemula-1\/'\n            }\n        })\n    <\/script>\n<\/body>\n<\/pre><\/div>\n\n\n
Nah syntax diatas akan menampilkan sebuah Tombol Link, yang apabila di klik akan mengikuti link<\/code> yang sudah kita perkenalkan di data, yaitu akan mengarah ke https:\/\/duniacoding.info\/belajar-vue-js-untuk-pemula-1\/<\/a>. <\/p>\n\n\n\n
Directive v-for<\/h3>\n\n\n\n
Directive v-for <\/code>ini adalah Directive yang digunakan untuk melakukan Looping didalam HTML kita. Directive ini akan melooping sesuai dengan jumlah yang kita tentukan\/banyaknya Data <\/code>yang kita Looping<\/code>, berikut contohnya.<\/p>\n\n\n
\n<body>\n    <div id="app">\n        <h3>Looping v-for<\/h3>\n        <ul>\n            <li v-for="index of 5" v-bind:key="index">\n                {{ index }}\n            <\/li>\n        <\/ul>\n    <\/div>\n    <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js"><\/script>\n    <script>\n        var app = new Vue({\n            el: '#app',\n        })\n    <\/script>\n<\/body>\n<\/pre><\/div>\n\n\n
Nah syntax diatas akan menghasilkan output<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Keren kan? kita bisa lakukan Looping didalam Bahasa HTML. Nah selain Looping dengan angka yang sudah ditentukan, v-for juga bisa melakukan Looping untuk Data dari Array yang kita punya. Contohnya seperti ini<\/p>\n\n\n
\n<body>\n    <div id="app">\n        <h3>Looping Array<\/h3>\n        <ul>\n            <li v-for="data, index of mobil" v-bind:key="index">\n                {{ data }}\n            <\/li>\n        <\/ul>\n    <\/div>\n    <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js"><\/script>\n    <script>\n        var app = new Vue({\n            el: '#app',\n            data: {\n                mobil: ['Toyota', 'Avanza', 'Xenia', 'Lamborgini']\n            }\n        })\n    <\/script>\n<\/body>\n<\/pre><\/div>\n\n\n
Pada syntax diatas, kita memiliki Array Mobil yang berisi [‘Toyota’, ‘Avanza’, ‘Xenia’, ‘Lamborgini’]. <\/em>Nah, kita bisa mengeluarkan semua Data di Array itu dengan v-for <\/em>dengan cara <li v-for=\"data, index of mobil\" v-bind:key=\"index\"><\/code>. Hasilnya<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Yang harus diingat dar v-for <\/em>adalah selalu menggunakan v-bind:key<\/code> untuk memberi tau sistem dengan apa index yang kita gunakan untuk Looping ini.<\/p>\n\n\n\n
Directive v-on<\/h3>\n\n\n\n
Selanjutnya yang kita pelajari di Artikel Apa itu Vue Directive adalah Directive v-on. <\/em>Sebenarnya directive ini sangat sederhana, Directive ini digunakan untuk Event <\/em>dalam HTML. Misal Event Click. <\/em>Penerapannya seperti ini<\/p>\n\n\n
\n<button v-on:click="FungsiClick()">Tombol<\/button>\n<\/pre><\/div>\n\n\n
Directive v-model<\/h3>\n\n\n\n
Directive ini sebenarnya sudah kita gunakna di artikel sebelumnya. Nah Directive v-model <\/em>ini biasanya digunakan untuk menyambungkan<\/code> kode HTML dengan Data <\/code>yang dimiliki Javascript. Berikut contohnya<\/p>\n\n\n
\n<body>\n    <div id="app">\n        <h3>{{ pesan }}<\/h3>\n        <input v-model="pesan">\n    <\/div>\n    <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js"><\/script>\n    <script>\n        var app = new Vue({\n            el: '#app',\n            data: {\n                pesan: "Pesan dengan v-model"\n            }\n        })\n    <\/script>\n<\/body>\n<\/pre><\/div>\n\n\n
Dengan syntax diatas kita akan menampilkan hasil seperti ini<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Kerennya v-model <\/em>ini adalah kita bisa mengubah tampilan dari HTML tanpa harus melakukan Refresh, coba saja diganti tulisan didalam kotak itu :D.<\/p>\n\n\n\n
Directive v-if, v-else-if, v-else<\/h3>\n\n\n\n
Directive terakhir yang akan kita bahas disini adalah Directive yang khusus untuk pengkondisian. Directive ini berguna sekali saat kita membuat Website kedepannya. Berikut contohnya.<\/p>\n\n\n\n
Contoh penggunaan v-if<\/em><\/p>\n\n\n
\n<body>\n    <div id="app">\n        <h1 v-if="seen">Pesan ini diperlihatkan dengan v-if<\/h1>\n    <\/div>\n    <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js"><\/script>\n    <script>\n        var app = new Vue({\n            el: '#app',\n            data: {\n                seen: True\n            }\n        })\n    <\/script>\n<\/body>\n<\/pre><\/div>\n\n\n
Nah kalau dilihat codingan diatas akan Menampilkan tampilan dari tag <h1> tersebut karena nilai dari seen <\/code>adalah True<\/code>, bisa dilihat di seen: True<\/code><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Nah sekarang coba saja ganti nilai seen tersebut dengan false, maka tag <h1> tidak akan ditampilkan.<\/p>\n\n\n\n
Terus.. bagaimana penggunaan dari v-else-if <\/em>dan v-else? <\/em>Nah kegunaan dari Directive ini sama dengan Pengkondisian if, else pada Umumnya. <\/p>\n\n\n
\n<body>\n    <div id="app">\n        <h1 v-if="seen == 1">Pesan ini diperlihatkan dengan v-if 1<\/h1>\n        <h1 v-else-if="seen == 2">Pesan ini diperlihatkan dengan v-if 2<\/h1>\n        <h1 v-else>Pesan ini diperlihatkan dengan v-if Selain 1 dan 2<\/h1>\n    <\/div>\n    <script src="https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js"><\/script>\n    <script>\n        var app = new Vue({\n            el: '#app',\n            data: {\n                seen: 2\n            }\n        })\n    <\/script>\n<\/body>\n<\/pre><\/div>\n\n\n
Pada syntax diatas, aku memberikan nilai seen <\/code>adalah 2<\/code>. jadi yang akan ditampilkan adalah v-else-if <\/em>dengan Kondisi seen==2<\/code>. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Nah coba saja ganti nilai seen<\/code> menjadi angka lainnya, maka tampilan dari HTML kita akan menyesuakan dengan itu. <\/p>\n\n\n\n
Kesimpulan<\/h2>\n\n\n\n
Nah cukup sampai disini saja Artikel Apa itu Vue Directive. Vue Directive ini adalah hal yang WAJIB kalian pelajari saat ingin mendalami Vue Js. Untuk mempelajari Apa itu Vue Directive dengan lebih jelas kalian bisa melihat Dokumentasi resmi Laravel di https:\/\/docs.vuejs.id\/v2\/guide\/index.html<\/a>.<\/p>\n\n\n\n
Sampai disini saja Artikel Apa itu Vue Directive, semoga Bermanfaat ya!<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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 berguna di Vue...<\/p>\n","protected":false},"author":2,"featured_media":1279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[49,190,191,189],"class_list":["post-1291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-tutorial","tag-tutorial-vue-js","tag-vue-directive","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/comments?post=1291"}],"version-history":[{"count":4,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1291\/revisions"}],"predecessor-version":[{"id":1302,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1291\/revisions\/1302"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media\/1279"}],"wp:attachment":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media?parent=1291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/categories?post=1291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/tags?post=1291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}