~ We are changing the world with technology. ~

Matt Mullenweg

6 Cara Mendefinisikan Component di Vue.js

6 Cara Mendefinisikan Component di Vue.js

947 Dilihat

Pendahuluan

Component menjadi salah satu bagian yang sangat berguna untuk mengelompokkan sebuah fungsi agar bisa digunakan berulang kali. Pengelompokkan fungsi ini berguna untuk mempercepat proses development dan proses maintenance dikemudian hari, karena sebagai programmer, kita akan dimudahkan dengan hanya mengubah code yang ada di component, maka secara otomatis semua perubahan tersebut akan diterapkan pada semua halaman yang menggunakan component tersebut.

Sepanjang pemahaman penulis, ada 6 cara mendefinisikan component di Vue.js.

Baca Juga: Aplikasi E-Commerce Laravel 6 #20: Auto Upload Produk Marketplace

Plain Strings

Cara cepat dan mudah dalam mendefinisikan Vue component adalah dengan menambahkan property template yang berisi markup yang ingin anda kelompokkan. Metode ini digunakan hanya untuk fungsi yang sederhana karena Anda akan kesulitan menggunakannya ketika diterapkan pada kasus yang lebih kompleks.

Vue.component('my-checkbox', {
  template: '<p>Belajar Templating by <b>{{ title }}</strong</p>',
  data() {
    return {
      title: 'daengweb.id'
    }
  }
});

Template Literals

Penerapan yang lebih kompleks, teknik lainnya biasa disebut template literals dengan menggunakan backticks. Tidak seperti plain strings, metode ini mengizinkan untuk meng-embed expressions dan bisa multi-line.

Dengan adanya fitur multi-line, kita bisa mengimplementasikan code yang lebih kompleks karena markup menjadi readable sehingga memudahkan untuk proses development.

Vue.component('my-checkbox', {
  template: `
    <div>
      <input type="checkbox" v-model="status" /> Status

      <p>
        <span v-if="status">Postingan Sudah Dipublish</span>
        <span v-else>Postingan Dalam Draft</span>
      </p>
    </div>
  `,
  data() {
    return {
      status: false,
      title: 'daengweb.id'
    }
  }
});

X-Templates

Metode ini digunakan untuk mendefinisikan template ke dalam script tag. Teknik yang digunakan untuk menerapkan nya adalah dengan memberikan atribut type="text/x-template" dan id yang nantinya akan dihubungkan dengan Vue component.

Kelebihan dari x-template adalah memungkinkan kita untuk menuliskan markup template langsung ke dalam HTML file. Kekurangannya adalah ketika mendefinisikan component ini, codingannya terpisah menjadi dua bagian sehingga agak sulit untuk mencari keterkaitannya.

//app.js

Vue.component('app-post', {
  template: '#post-template',
  data() {
    return {
    	title
    }
  },
  methods: {
    submit() {
    	console.log('cek')
    }
  }
});
<!-- index.html -->

<div id="app">...</div>
<script type="text/x-template" id="post-template">
  <div class="form-group">
  	<label>Title</label>
  	<input class="form-control" v-model="title">
  </div>
  <button class="btn btn-primary btn-sm" @click="do">Simpan</button>
</script>

Inline Templates

Pendekatan menggunakan inline-template hampir sama dengan x-templates, hanya saja cara ini bisa secara langsung dituliskan ke dalam markup html. Pastikan untuk menambahkan attribut inline-template, sehingga Vue tahu dimana bisa menemukannya.

Adapun kekurangan dan kelebihannya sama saja dengan x-template, tapi satu hal yang menjadi nilai tambahnya adalah template bisa dituliskan secara langsung ke dalam body, sehingga content yang di-load bisa di crawl untuk kebutuhan SEO.

Vue.component('post-template', {
  data() {
    return {
    	title: ''
    }
  },
  methods: {
    submit() {}
  }
});
<div id="app">
  <post-template inline-template>
    <div class="form-group">
      <label>Title</label>
      <input class="form-control" v-model="title">
    </div>
    <button class="btn btn-primary btn-sm" @click="do">Simpan</button>
  </post-template>
</div>

JSX

JSX adalah ekstension Javascript yang mengizinkan kamu untuk menggunakan syntax khusus ke dalam Javascript code. Teknik ini dipopulerkan oleh React, sehingga opsi ini paling kontroversial di Vue, karena beberapa developer mengganggapnya tidak "cantik", tidak intuitif dan sebagai bentuk pengkhianatan terdapat etos Vue.

Vue.component('my-checkbox', {
  data() {
    return {
    	title: ''
    }
  },
  methods: {
    submit() {}
  },
  render() {
    return <div class="form-group">
      <label>Title</label>
      <input class="form-control" v-model="title">
    </div>
    <button class="btn btn-primary btn-sm" @click="do">Simpan</button>
  }
});

Single-file Components

Salah satu fitur yang cukup populer dari Vue.js adalah Single-File Component (SFC). Fitur ini memungkinkan kamu untuk menuliskan component ke dalam sebuah file terpisah. Component ini di-compile oleh vue-loader ke dalam render functions, jadi kamu bisa mendapatkan performance runtime yang cukup baik.

Untuk membuat SFC, kamu bisa membuat file dengan ekstensi .vue, misalnya: Post.vue. Kemudian definisikan template tag dan script tag. Nantinya kita bisa meng-import file ini ke dalam main Vue app.

<template>
  <div class="form-group">
    <label>Title</label>
    <input class="form-control" v-model="title">
  </div>
  <button class="btn btn-primary btn-sm" @click="do">Simpan</button>
</template>
<script>
    export default {
      data() {
        return {
        	title: ''
        }
      },
      methods: {
        submit() {}
      }
    };
</script>

Baca Juga: Membuat Aplikasi Ekspedisi Lumen 6 #6: API Mengelola Armada

Kesimpulan

Mana yang terbaik diantara 6 cara mendefinisikan component di Vue.js? Jawabannya tentu saja sangat relatif, tergantung kebutuhan anda. Tapi jika harus memilih, fitur Single-File Component adalah opsi yang cukup powerful hampir disemua skenario.

Setiap pilihan yang tersedia adalah alat yang bisa digunakan untuk memenuhi kebutuhan kita sebagai developer. Jadi, perlakukanlah sebagai alat & selesaikan segera masalah yang kamu hadapi.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Sistem Ongkos Kirim RuangAPI Menggunakan Vue.js VueJS

Sistem Ongkos Kirim RuangAPI Menggunakan...

Membuat simulasi untuk menampilkan ongkos kirim pada sebuah aplikasi yang membutuhkan informasi terkait data pengiriman berdasarkan berat dan tujuan pengiriman hingga pada tingkatan kecamatan. Berikut...

Membuat Datatable Dengan Vue.js & Laravel 6 Laravel VueJS

Membuat Datatable Dengan Vue.js & Larave...

Tak bisa dipungkiri, Datatable telah menarik banyak perhatian sekaligus pengguna karena ragam fitur yang ditawarkannya serta kemudahan dalam mengintegrasikan dengan aplikasi yang sedang kita develop....

Membuat Aplikasi Chatting Menggunakan Laravel 6 & Vue.js Laravel VueJS

Membuat Aplikasi Chatting Menggunakan La...

Fasilitas komunikasi atau chatting antar pengguna menjadi fitur yang menarik dari sebuah aplikasi, terlebih aplikasi yang sifatnya transaksi jual beli guna menunjang kecepatan dan ketepatan informasi...

Komentar