Mulai dari Nol: Panduan Lengkap Vue.js untuk Pemula

Vue.js adalah salah satu framework JavaScript paling populer untuk membangun antarmuka pengguna (UI) interaktif. Framework ini dikenal dengan sintaks yang mudah dipahami, ringan, dan reactive, sehingga sangat cocok untuk pemula yang ingin belajar framework modern.

Dalam artikel ini, kita akan membahas dasar-dasar Vue.js, mulai dari instalasi, reactive data, binding, directive, component, hingga contoh proyek sederhana.

1. Apa itu Vue.js?

Vue.js adalah framework progresif yang dikembangkan oleh Evan You pada tahun 2014. Kata “progresif” berarti Anda bisa mulai dari yang sederhana, misalnya hanya menambahkan Vue ke halaman HTML, dan seiring berkembangnya aplikasi, Anda bisa memanfaatkan fitur-fitur canggih seperti component-based architecture, routing, dan state management.

Kelebihan Vue.js

• Ringan dan cepat: Bundle Vue hanya sekitar 20 KB.

• Reactive data binding: Update data otomatis mempengaruhi DOM tanpa manipulasi manual.

• Component-based: Membuat kode modular dan mudah dikelola.

• Mudah dipelajari: Sintaks mirip HTML dan JavaScript murni.

• Komunitas aktif: Banyak plugin dan library pendukung.

2. Cara Memulai Vue.js

Ada dua cara untuk memulai Vue.js:

2.1. Menggunakan CDN

Ini cara paling mudah untuk pemula, cukup masukkan Vue dari CDN ke halaman HTML:

Setelah itu, kita bisa membuat instance Vue di halaman HTML.

2.2. Menggunakan Vue CLI

Jika ingin proyek lebih besar dan modern, gunakan Vue CLI:

npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve

CLI memberikan template proyek dengan build system, hot-reload, dan struktur folder yang rapi.

3. Membuat Instance Vue

Di Vue 3, kita menggunakan createApp untuk membuat instance:

<div id="app">
<p>{{ message }}</p>
</div><script>
const { createApp } = Vue;createApp({
data() {
return {
message: 'Halo, Vue.js!'
}
}
}).mount('#app');
</script>

Penjelasan

• createApp({ data, methods }) → Membuat aplikasi Vue.

• data() → Mengembalikan object reactive yang bisa digunakan di template.

• {{ message }} → Interpolation untuk menampilkan data ke DOM.

• .mount('#app') → Menempelkan Vue ke elemen DOM.

Jika message berubah, DOM akan otomatis diperbarui tanpa manipulasi manual.

4. Directive Dasar Vue.js

Directive adalah atribut khusus di Vue yang mempengaruhi behavior DOM.

4.1. v-bind

Digunakan untuk binding atribut HTML ke data.

Bisa juga disingkat:

4.2. v-model

Untuk two-way data binding di form input:

Setiap perubahan di input akan otomatis update name dan sebaliknya.

4.3. v-if / v-else

Mengontrol rendering kondisional:

4.4. v-for

Looping data untuk menampilkan daftar:

key penting untuk optimasi rendering.

4.5. v-on

Menangani event listener, bisa disingkat dengan @:

5. Methods dan Event Handling

Kita bisa menambahkan function di object methods dan memanggilnya lewat directive v-on:

<div id="app">
<p>Counter: {{ count }}</p>
<button @click="increment">Tambah</button>
</div><script>
createApp({
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++;
}
}
}).mount('#app');
</script>

Setiap klik tombol akan menambah count dan DOM otomatis terupdate.

6. Computed Property

Computed property digunakan untuk data yang tergantung dari data lain, dan otomatis update ketika data berubah:

<p>Nama lengkap: {{ fullName }}</p>

<script>
createApp({
data() {
return { firstName: 'John', lastName: 'Doe' };
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
}).mount('#app');
</script>

Computed lebih efisien daripada method biasa karena hasilnya di-cache sampai data depedensi berubah.

7. Watchers

Watcher digunakan untuk memantau perubahan data dan menjalankan kode tertentu:

<p>Jumlah: {{ count }}</p>

<script>
createApp({
data() {
return { count: 0 };
},
watch: {
count(newVal, oldVal) {
console.log(`Count berubah dari ${oldVal} ke ${newVal}`);
}
}
}).mount('#app');
</script>

Watcher berguna ketika perlu respon tambahan terhadap perubahan data, misalnya panggil API.

8. Component Dasar Vue

Vue menggunakan component-based architecture. Component adalah bagian modular UI yang bisa dipakai ulang.

8.1. Membuat Component Sederhana

const Counter = {
template: `
<div>
<p>Counter: {{ count }}</p>
<button @click="count++">Tambah</button>
</div>
`,
data() {
return { count: 0 };
}
};createApp({
components: { Counter }
}).mount('#app');

8.2. Menggunakan Component

Dua counter bekerja independen karena masing-masing memiliki state sendiri.

9. Props dan Komunikasi Antar Component

Props digunakan untuk mengirim data dari parent ke child.

const Child = {
props: ['message'],
template: `<p>Pesan: {{ message }}</p>`
};createApp({
components: { Child }
}).mount('#app');

10. Direktif Tambahan

• v-show → Mengontrol visibility (display CSS) tanpa remove DOM.

• v-once → Render sekali dan tidak update lagi.

• v-pre → Melewatkan compilation untuk teks tertentu.

11. Praktik Terbaik

1. Gunakan component untuk setiap bagian UI.

2. Gunakan computed property daripada methods untuk data yang tergantung data lain.

3. Gunakan key di v-for untuk performa optimal.

4. Hindari manipulasi DOM manual → biarkan Vue reactive system yang handle.

5. Pisahkan logic dan template agar kode rapi dan maintainable.

12. Contoh Proyek Sederhana

Misalkan kita membuat aplikasi todo list sederhana:

<div id="app">
<h2>Todo List</h2>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Tambah todo">
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo }}
<button @click="removeTodo(index)">Hapus</button>
</li>
</ul>
</div><script>
createApp({
data() {
return {
newTodo: '',
todos: []
}
},
methods: {
addTodo() {
if(this.newTodo.trim() !== '') {
this.todos.push(this.newTodo.trim());
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
}).mount('#app');
</script>

Fitur yang Dipelajari

• v-model untuk input binding.

• v-for untuk looping list todo.

• v-on:click (@click) untuk event handling.

• Reactive update otomatis → DOM berubah tanpa manual.

13. Tips Belajar Vue.js

1. Mulai dari CDN → Praktik langsung di browser.

2. Pelajari directive dasar → v-if, v-for, v-model, v-on.

3. Latihan component sederhana → pisahkan UI menjadi modul.

4. Pelajari computed dan watcher → memahami reactive system.

5. Gunakan Vue DevTools → debug dan lihat reactive data.

14. Kesimpulan

Vue.js adalah framework JavaScript yang mudah dipelajari untuk pemula, tapi juga cukup kuat untuk membangun aplikasi kompleks. Dengan memahami:

• Reactive data

• Directive

• Component

• Event handling dan methods

Anda bisa membuat aplikasi interaktif dengan cepat. Keunggulan utama Vue adalah update DOM otomatis, batching efficient, dan component modular, sehingga developer fokus pada logic, bukan manipulasi DOM manual.

Artikel ini sudah membahas dasar-dasar Vue untuk pemula hingga contoh proyek nyata. Dengan latihan rutin, memahami Vue akan terasa mudah dan menyenangkan.