Membangun Komponen Vue.js Pertama Anda

Vue.js adalah kerangka kerja berbasis komponen, yang berarti bahwa aplikasi dibangun menggunakan komponen yang dapat digunakan kembali. Setiap komponen merangkum HTML, CSS, dan JavaScript-nya sendiri. Artikel ini akan memandu Anda melalui proses membangun komponen Vue.js pertama Anda dari awal.

Membuat Komponen Vue Baru

Komponen Vue.js biasanya disimpan dalam berkas .vue. Setiap berkas komponen terdiri dari tiga bagian utama: '<template>', '<script>', dan '<style>'. Mari buat komponen sederhana yang disebut Greeting.vue.

1. Arahkan ke Folder Proyek Anda: Gunakan terminal untuk berpindah ke direktori proyek Vue Anda:

cd my-vue-project

2. Buat File Komponen Baru: Di direktori src/components, buat file baru bernama Greeting.vue.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Komponen Greeting.vue ini berisi:

• <template>: Menentukan struktur HTML komponen.
• <script>: Berisi logika JavaScript untuk komponen, seperti properti data dan metode.
• <style>: Berisi gaya CSS yang dicakup dalam komponen ini. Atribut scoped memastikan bahwa gaya tersebut hanya berlaku untuk komponen ini.

Menggunakan Komponen Anda

Setelah membuat komponen, Anda perlu menggunakannya dalam aplikasi Vue Anda. Buka berkas src/App.vue dan ubah agar menyertakan komponen Greeting:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

Dalam berkas App.vue yang diperbarui ini:

• Impor Komponen: Gunakan import Greeting from './components/Greeting.vue'; untuk mengimpor komponen Greeting.
• Daftarkan Komponen: Tambahkan Greeting ke objek components di blok export default.
• Gunakan Komponen: Masukkan tag '<Greeting />' ke dalam bagian '<template>' untuk menggunakan komponen di aplikasi Anda.

Menguji Komponen Anda

Simpan perubahan Anda dan pastikan server pengembangan Anda berjalan. Buka peramban Anda dan navigasikan ke http://localhost:8080. Anda akan melihat konten komponen Greeting ditampilkan di halaman.

Kesimpulan

Anda telah berhasil membuat dan menggunakan komponen Vue.js pertama Anda. Komponen merupakan blok penyusun aplikasi Vue.js, yang memungkinkan Anda untuk merangkum dan mengelola berbagai bagian antarmuka pengguna Anda. Saat Anda semakin mengenal Vue.js, Anda dapat menjelajahi fitur-fitur lanjutan seperti properti komponen, peristiwa, dan kait siklus hidup untuk membangun aplikasi yang lebih interaktif dan kompleks.

Terus bereksperimen dengan komponen Vue.js dan perluas pengetahuan Anda untuk membuat aplikasi web yang dinamis dan menarik.