Intro to Vue.js

👋 Pengenalan Vue.js

Vue.js adalah framework JavaScript progresif yang digunakan untuk membangun antarmuka pengguna (user interface) interaktif dan SPA (Single Page Applications). Vue dirancang agar ringan, fleksibel, dan mudah dipelajari, terutama bagi developer frontend pemula maupun berpengalaman.

---

🚀 Mengapa Menggunakan Vue.js?

• Ringan & Cepat: Ukuran file kecil dan performa tinggi.
• Mudah Dipelajari: Sintaks yang intuitif, mirip HTML.
• Reaktif: Data binding dua arah (two-way binding).
• Komponen Reusable: Struktur modular berbasis komponen.
• Integrasi Mudah: Bisa dipakai secara parsial dalam proyek HTML biasa atau full SPA.
• Ekosistem Kuat: Vue Router, Vuex/Pinia, Vue CLI, dan Nuxt.js.

---

📦 Fitur Utama Vue.js

Fitur	Keterangan
Template Syntax	Menggunakan deklaratif HTML + interpolasi data
Reactive Data	Perubahan data langsung memengaruhi tampilan
Component System	Struktur kode modular & reusable
Lifecycle Hooks	Menyisipkan logika pada fase hidup komponen
Transitions	Efek animasi saat elemen muncul/hilang

---

🧪 Perbandingan Ringan

Fitur	Vue.js	React	Angular
Ukuran	~20–30 KB	~40–45 KB	~500 KB
Belajar Mudah	✅ Sangat Mudah	⚠️ Menengah	❌ Kompleks
Two-way Bind	✅ Ya	❌ Tidak	✅ Ya
Template	HTML + JS	JSX (JS)	HTML + TS

---

🎯 Kapan Menggunakan Vue.js?

Vue cocok digunakan untuk:

• Website dinamis skala kecil hingga menengah
• SPA seperti dashboard/admin panel
• Aplikasi mobile (via Ionic atau Quasar)
• Sistem CMS frontend
• Progressive Web Apps (PWA)

---

🧰 Contoh Sederhana Vue

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Halo dari Vue.js!'
    }
  })
</script>