Sekarang kita akan belajar membuat component Vue JS. Component dalam Vue biasanya dibuat dalam satu file atau biasa disebut dengan SFC (Single File Component). Misalkan kita akan membuat component dengan nama HelloVue maka kita buat file dengan nama HelloVue.vue. Component dalam Vue terdiri dari 3 bagian, yaitu:
- Script, berisi kode JavaScript atau TypeScript
- Template, berisi kode HTML
- Style, berisi kode CSS
Perhatikan contoh component sangat sederhana berikut ini. Jangan lupa menyimpan komponen berikut dengan nama HelloVue.vue pad direktori components.
<script setup lang="ts">
console.info("Hello Vue");
</script>
<template>
<h1 class="title">Hello, We learn vue</h1>
</template>
<style scoped>
.title {
color: red;
}
</style>Secara default project vue akan membaca index.html. Kita akan coba untuk membuat file html agar file tersebut dapat dibaca oleh vue. Misal kita buat hello.html dengan kode seperti berikut ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Vue</title>
</head>
<body>
<div id="hello"></div>
<script type="module" src="/src/hello.ts"></script>
</body>
</html>Pada kode HTML di atas kita akan mencoba untuk membaca script hello.ts. Jadi kita buat script hello.ts dengan isi seperti berikut ini:
import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
createApp(HelloWorld).mount('#hello');Untuk menampilkan halaman tersebut kita harus memasukkan alamat http://localhost:5174/hello.html. Jika berhasil, kita akan mendapatkan tampilan seperti berikut ini.
API Style pada Component Vue JS
Untuk belajar lebih lanjut, kita harus mengenal dulu yang disebut dengan API Style pada vue js. Untuk saat ini Vue menyediakan 2 jenis API Style untuk membuat aplikasi, yaitu Options API dan Composition API. Tapi nanti yang akan kita gunakan adalah Composition API karena itu yang direkomendasikan oleh Vue.
Options API
Pada Options API Logic Component diletakkan pada Object Options yang isinya adalah data, method dan mounted. Attribute di Options selanjutnya diekspos ke instance Component-nya. Perhatikan contoh penggunaan options API berikut ini.
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: "OptionsApiStyle",
data() {
return {
text: "Ardhan",
}
},
methods: {
sayHello(): void {
this.text += "Hai, Hai,";
}
},
mounted(): void {
console.info(name);
}
})
</script>
<template>
<h1 class="title">Using Options API Style</h1>
<button @click="sayHello">Text is: {{ text }}</button>
</template>
<style scoped>
.title {
color: blue;
}
</style>Jika berhasil, maka kita akan mendapatkan tampilan seperti ini. Dan jika button text is diklik maka akan bertambah dengan kata Hai, Hai.
Composition API
Composition API menurutku lebih mudah digunakan karena kita tidak perlu membuat object Options. Kita bisa menaruh logic component Vue JS dengan lebih leluasa. Berikut ini adalah contoh component yang menggunakan composition API.
<script setup lang="ts">
import {ref} from "vue";
let text: any = ref("Ardhan");
function sayHello(): void {
text.value += "Hai";
}
</script>
<template>
<h1 class="title">Using Composition API Style</h1>
<button @click="sayHello">Text is: {{ text }}</button>
</template>
<style scoped>
.title {
color: magenta;
}
</style>Jika kita perhatikan contoh di atas, kita bisa melihat bahwa penulisan composition API bisa lebih sederhana dan flexible. Kita bisa menaruh function dan variable dimananpun kita mau. Sementara jika kita menggunakan options API kita harus meletakkannya dalam sebuah object.
Penutup Component Vue JS
Nah, demikianlah cara membuat component Vue JS. Akan tetapi, materi tentang component ini masih belum selesai ya. Kita akan lanjutnya materinya nanti. Semoga tulisan ini bermanfaat.
