VueJS

VueJS: Membuat Component

VueJS: Membuat Component

1962 Dilihat

Component adalah salah satu fitur yang powerful dari Vue.js, bayangkan anda dapat membuat sebuah component yang berisi elemen HTML yang dapat digunakan kembali (reusable) tanpa perlu menuliskan kembali elemen tersebut. Hal ini tentu saja dapat membantu anda mempercepat proses development, selain itu anda juga dimudahkan dalam me-mantainance code yang telah anda tulis .

Membuat Component

Kita akan memulai dengan component sederhana, agar bisa menggunakan sebuah component maka yang pertama yang harus kita lakukan adalah register component. Salah satu cara untuk melakukann register component adalah dengan menggunakan method Vue.component

Vue.component('nama_component', {
  //option
});

Berikut contoh sederhana dengan membuat sebuah component yang berisi template tag h1:

<!DOCTYPE html>
<html>
<head>
    <title>Computed Properties - Daengweb</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
​
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div id="dw" class="container">
        <dw-paragraf></dw-paragraf>
    </div>
​
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.component('dw-paragraf', {
            template: '<h1>Membuat component</h1>'
        });
​
        new Vue({
            el: '#dw',
        }); 
    </script>
</body>
</html>

Sekarang kita sudah memiliki sebuah component dengan nama dw-paragraf, dan component dengan custom elemen ini bisa kita tempatkan dimanapun layaknya sebuah tag HTML. Karena sifatnya reusable, maka dw-paragraf dapat kita gunakan sesuai keinginan.

Custom Templates

Selain menggunakan cara diatas dalam membuat sebuah custom elemen, terdapat cara lain dalam membuat template untuk component kita. Cara lain tersebut adalah dengan membuat sebuah tag script dengan type text/template dan id dw-paragraf

<div id="dw" class="container">
    <dw-paragraf></dw-paragraf>
</div>
​
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/template" id="dw-paragraf">
    <h1>Membuat template</h1>
</script>
<script type="text/javascript">
    Vue.component('dw-paragraf', {
        template: '#dw-paragraf'
    });
​
    new Vue({
        el: '#dw',
    }); 
</script>

Adapun versi lainnya sekaligus banyak digunakan adalah dengan membuat tag template disertai id yang akan menjadi selector.

<div id="dw" class="container">
    <dw-paragraf></dw-paragraf>
</div>
​
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="dw-paragraf">
    <h1>Membuat template Vue.js</h1>
</template>
<script type="text/javascript">
    Vue.component('dw-paragraf', {
        template: '#dw-paragraf'
    });
​
    new Vue({
        el: '#dw',
    }); 
</script>

Menambahkan Properties

Kurang menarik bukan jika isi dari template yang akan ditampilkan itu-itu saja, maka kita memiliki properties lain yang dapat digunakan untuk membuat content yang dimiliki bersifat lebih dinamis, yakni dengan menggunakan props.

<div id="dw" class="container">
    <dw-paragraf isi="saya belajar Vue.js"></dw-paragraf>
    <dw-paragraf isi="saya belajar Laravel"></dw-paragraf>
    <dw-paragraf isi="saya belajar bersama Daengweb.id"></dw-paragraf>
</div>
​
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="dw-paragraf">
    <h1>{{ isi }}</h1>
</template>
<script type="text/javascript">
    Vue.component('dw-paragraf', {
        props: ['isi'],
        template: '#dw-paragraf'
    });
​
    new Vue({
        el: '#dw',
    }); 
</script>

Selain itu, kita dapat meng-explore lebih jauh lagi tentang penggunaan properties ini, misalnya dengan menambahkan object untuk menampilkan lebih dari satu data.

<div id="dw" class="container">
    <dw-paragraf v-bind:dw="{isi: 'Belajar vue.js', jam: '10.00'}"></dw-paragraf>
    <dw-paragraf v-bind:dw="{isi: 'Belajar Laravel', jam: '12.30'}"></dw-paragraf>
    <dw-paragraf v-bind:dw="{isi: 'Belajar HTML', jam: '18.00'}"></dw-paragraf>
</div>
​
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="dw-paragraf">
    <h1>{{ dw.isi }} pada jam {{ dw.jam }}</h1>
</template>
<script type="text/javascript">
    Vue.component('dw-paragraf', {
        props: ['dw'],
        template: '#dw-paragraf'
    });
​
    new Vue({
        el: '#dw',
    }); 
</script>

Component Reusable

Pemrograman adalah tentang berimajinasi, maka mari kita berimajinasi sejenak. Seandainya terdapat perubahan variable dari jam menjadi waktu pada sisi backend, maka cara diatas dalam menampilkan list tidaklah efektif karena kita menuliskan custom elemen tersebut secara berulang. Maka untuk memecahkan masalah tersebut, kita dapat menggunakan v-for untuk melakukan perulangan. Sehingga apabila terjadi perubahan variable, kita cukup mengganti pada bagian template saja.

<div id="dw" class="container">
    <h1>Jadwal Senin</h1>
    <ul>
        <dw-paragraf v-for="dw in jadwal" v-bind:dw="dw"></dw-paragraf>
    </ul>
    <h1>Jadwal Selasa</h1>
    <ul>
        <dw-paragraf v-for="dw in jadwal" v-bind:dw="dw"></dw-paragraf>
    </ul>
</div>
​
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="dw-paragraf">
    <li>{{ dw.isi }} pada jam {{ dw.jam }}</li>
</template>
<script type="text/javascript">
    Vue.component('dw-paragraf', {
        props: ['dw'],
        template: '#dw-paragraf'
    });
​
    new Vue({
        el: '#dw',
        data: {
            jadwal: [
                {
                    isi: 'belajar vue.js', jam: '10.00'
                },
                {
                    isi: 'belajar Laravel', jam: '12.00'
                },
                {
                    isi: 'belajar HTML', jam: '18.00'
                }
            ]
        }
    }); 
</script>

Sekarang coba anda ganti variable datanya dari jam menjadi waktu, dan untuk mengubah seluruh custom elemen tersebut anda cukup melakukan perubahan pada template anda.

<template id="dw-paragraf">
    <li>{{ dw.isi }} pada jam {{ dw.waktu }}</li>
</template>

Cukup sampai disini untuk materi tentang component, silahkan explore lebih jauh lagi dalam berimajinasi menggunakan component. See next time.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Membuat Validasi Form Menggunakan Vuelidate VueJS

Membuat Validasi Form Menggunakan Vuelid...

Interaksi antara user dan aplikasi adalah sebuah hal wajar yang pasti terjadi, terlebih dalam hal penginputan data. Pada artikel ini kita akan belajar bagaimana Membuat Validasi Form Menggunakan Vueli...

Tutorial Vuex #3: Module & Helpers VueJS

Tutorial Vuex #3: Module & Helpers

Salah satu fitur lainnya dari Vuex adalah memecah block code menjadi bagian bagian kecil, berikut adalah bagaimana cara membuat modules dan menggunakan helpers pada Vuex

Tutorial Vuex #2: Mutations & Actions VueJS

Tutorial Vuex #2: Mutations & Actions

Mutations bertugas untuk mengkofirmasi setiap perubahan state yang akan dilakukan, sedangkan Actions bertugas untuk memberikan perintah terhadap apa yang akan dilakukan. Seri ini akan menggambarkan ba...

Komentar