Pengenalan Vue & Komponen Pertama

Apa itu Vue?

Vue (dibaca "view") adalah framework JavaScript untuk membangun antarmuka web yang interaktif. Dibuat oleh Evan You dan kini dipakai luas di seluruh dunia. Vue terkenal ramah pemula: kamu cukup paham HTML, CSS, dan sedikit JavaScript untuk mulai.

Bayangkan membangun halaman web seperti merakit LEGO. Tiap bagian (tombol, kartu produk, menu) dibuat sebagai balok kecil yang disebut komponen. Balok-balok itu disusun menjadi halaman utuh. Jika satu balok berubah, hanya balok itu yang diperbarui — bukan seluruh halaman.

Dua kekuatan utama Vue:

• Declarative rendering — kamu cukup mendeskripsikan tampilan berdasarkan data ("kalau jumlah = 3, tampilkan angka 3"). Vue yang mengurus bagaimana DOM diperbarui.
• Reactivity — saat data berubah, tampilan ikut berubah otomatis. Tidak perlu lagi document.getElementById(...).textContent = ....

Cara memulai Vue

Untuk proyek sungguhan, pasang Node.js (versi 18+) lalu jalankan:

npm create vue@latest
cd nama-proyek
npm install
npm run dev

Terminal akan menampilkan alamat seperti http://localhost:5173. Buka di browser — aplikasi Vue-mu sudah berjalan, dan setiap kali kamu menyimpan file, halaman diperbarui otomatis (hot reload).

Anatomi file .vue (Single-File Component)

Satu komponen Vue ditulis dalam satu file berakhiran .vue yang punya tiga bagian:

<template>
  <h1>{{ pesan }}</h1>
</template>

<script setup>
const pesan = 'Halo dari Vue!'
</script>

<style scoped>
h1 { color: seagreen; }
</style>

Struktur proyek hasil create-vue

nama-proyek/
├─ index.html          halaman HTML tunggal
├─ package.json        daftar paket & perintah (dev, build)
├─ vite.config.js      konfigurasi Vite
└─ src/
   ├─ main.js          titik masuk: createApp(App).mount('#app')
   ├─ App.vue          komponen akar
   ├─ components/      komponen-komponen kecil
   └─ assets/          gambar, CSS

Isi main.js hanya beberapa baris:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Cara kerja latihan di kursus ini

• Editor berisi file App.vue. Kamu menulis satu komponen utuh (template + script + style bila perlu).
• Saat menekan Jalankan, komponenmu dikompilasi dan dirender sungguhan dengan Vue 3 di browser, lalu dicek otomatis.
• Impor dari Vue ditulis seperti biasa: import { ref } from 'vue'.
• Bab yang butuh banyak file memakai pemisah <!-- file: Nama.vue --> — akan dijelaskan saat dibutuhkan.

Kesalahan umum pemula

• Lupa menutup tag: <h1>Halo tanpa </h1> membuat template error.
• Menulis {{ pesan }} tetapi variabel pesan tidak dideklarasikan di <script setup> — hasilnya kosong dan muncul peringatan di console.
• Mencoba memakai file .vue langsung dari CDN tanpa build tool — file .vue butuh Vite/bundler (di latihan ini sudah kami sediakan).