Belajar Vue js #2 : Apa itu Vue Directive?

apa-itu-vue-directive

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.

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 ekspresi Jacascript didalam HTML biasa.

Biasanya, Directive ini diawali dengan v-. nah sekarang coba Mimin contohkan Vue Directive paling sederhana.

     <div id="app">
        <h1 v-if="true">Terlihat</h1>
        <h1 v-if="false">Tidak Terlihat</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
        })
    </script>

Nah, kalau dilihat diatas ada 2 tag <h1> yang memiliki Vue Directive yaitu v-if. Directive ini akan menampilkan tag <h1> apabila bernilai True. Jadi kalau dibuka di Website, maka hanya akan muncul seperti ini

Belajar Vue js #2 : Apa itu Vue Directive? Dunia Coding

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.

Daftar Vue Directive

Nah disini akan Mimin contohkan beberapa Vue Directive beserta kegunaanya masing-masing. Tiap Vue Directive memiliki kegunaan yang berbeda.

Directive v-bind

Seperti namanya, v-bind digunakan untuk mengikat elemen HTML yang kita punya. Biasanya v-bind ini mengikat elemen kita dengan Data dari Javascript yang kita miliki. Berikut contoh simplenya

<body>
    <div id="app">
        <a v-bind:href="link">Link</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                link: 'https://duniacoding.info/belajar-vue-js-untuk-pemula-1/'
            }
        })
    </script>
</body>

Nah syntax diatas akan menampilkan sebuah Tombol Link, yang apabila di klik akan mengikuti link yang sudah kita perkenalkan di data, yaitu akan mengarah ke https://duniacoding.info/belajar-vue-js-untuk-pemula-1/.

Directive v-for

Directive v-for ini adalah Directive yang digunakan untuk melakukan Looping didalam HTML kita. Directive ini akan melooping sesuai dengan jumlah yang kita tentukan/banyaknya Data yang kita Looping, berikut contohnya.

<body>
    <div id="app">
        <h3>Looping v-for</h3>
        <ul>
            <li v-for="index of 5" v-bind:key="index">
                {{ index }}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
        })
    </script>
</body>

Nah syntax diatas akan menghasilkan output

Belajar Vue js #2 : Apa itu Vue Directive? Dunia Coding

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

<body>
    <div id="app">
        <h3>Looping Array</h3>
        <ul>
            <li v-for="data, index of mobil" v-bind:key="index">
                {{ data }}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                mobil: ['Toyota', 'Avanza', 'Xenia', 'Lamborgini']
            }
        })
    </script>
</body>

Pada syntax diatas, kita memiliki Array Mobil yang berisi [‘Toyota’, ‘Avanza’, ‘Xenia’, ‘Lamborgini’]. Nah, kita bisa mengeluarkan semua Data di Array itu dengan v-for dengan cara <li v-for="data, index of mobil" v-bind:key="index">. Hasilnya

Belajar Vue js #2 : Apa itu Vue Directive? Dunia Coding

Yang harus diingat dar v-for adalah selalu menggunakan v-bind:key untuk memberi tau sistem dengan apa index yang kita gunakan untuk 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 untuk Event dalam HTML. Misal Event Click. Penerapannya seperti ini

<button v-on:click="FungsiClick()">Tombol</button>

Directive v-model

Directive ini sebenarnya sudah kita gunakna di artikel sebelumnya. Nah Directive v-model ini biasanya digunakan untuk menyambungkan kode HTML dengan Data yang dimiliki Javascript. Berikut contohnya

<body>
    <div id="app">
        <h3>{{ pesan }}</h3>
        <input v-model="pesan">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                pesan: "Pesan dengan v-model"
            }
        })
    </script>
</body>

Dengan syntax diatas kita akan menampilkan hasil seperti ini

Belajar Vue js #2 : Apa itu Vue Directive? Dunia Coding

Kerennya v-model ini adalah kita bisa 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 khusus untuk pengkondisian. Directive ini berguna sekali saat kita membuat Website kedepannya. Berikut contohnya.

Contoh penggunaan v-if

<body>
    <div id="app">
        <h1 v-if="seen">Pesan ini diperlihatkan dengan v-if</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                seen: True
            }
        })
    </script>
</body>

Nah kalau dilihat codingan diatas akan Menampilkan tampilan dari tag <h1> tersebut karena nilai dari seen adalah True, bisa dilihat di seen: True

Belajar Vue js #2 : Apa itu Vue Directive? Dunia Coding

Nah sekarang coba saja ganti nilai seen tersebut dengan false, maka tag <h1> tidak akan ditampilkan.

Terus.. bagaimana penggunaan dari v-else-if dan v-else? Nah kegunaan dari Directive ini sama dengan Pengkondisian if, else pada Umumnya.

<body>
    <div id="app">
        <h1 v-if="seen == 1">Pesan ini diperlihatkan dengan v-if 1</h1>
        <h1 v-else-if="seen == 2">Pesan ini diperlihatkan dengan v-if 2</h1>
        <h1 v-else>Pesan ini diperlihatkan dengan v-if Selain 1 dan 2</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                seen: 2
            }
        })
    </script>
</body>

Pada syntax diatas, aku memberikan nilai seen adalah 2. jadi yang akan ditampilkan adalah v-else-if dengan Kondisi seen==2.

Belajar Vue js #2 : Apa itu Vue Directive? Dunia Coding

Nah coba saja ganti nilai seen menjadi angka lainnya, maka tampilan dari HTML kita akan menyesuakan dengan itu.

Kesimpulan

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.

Sampai disini saja Artikel Apa itu Vue Directive, semoga Bermanfaat ya!

Share

You may also like...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *