~ We are changing the world with technology. ~

Matt Mullenweg

VueJS: Membuat Component

VueJS: Membuat Component

3083 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

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #8: Manage Customers Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Pelanggan menjadi bagian yang penting dari sebuah perusahaan laundry, maka fitur yang akan dikerjakan pada serial ini adalah sebuah fitur untuk mengelola pelanggan. Adapun schema yang dirancang dimana...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #7: Push Notification Expenses Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Dalam setiap kegiatan berwirausaha pasti terdapat biaya biaya yang harus dikeluarkan untuk menjalankan operasional dari usaha tersebut, maka dalam aplikasi ini, kita tidak hanya akan mencatat transaks...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #6: Role & User Permissions Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Sambil menikmati secangkir kopi ini, kutuliskan serial lanjutan membuat Aplikasi Laundry menggunakan Laravel 5.8 & Vue.js dengan metode SPA (Single Page Application) yang telah memasuki serial ke-6 ny...

Komentar