Apa itu Vue? — Vue — Hyper Sheets

Vue.js adalah framework JavaScript progresif untuk membangun user interface. Dibuat oleh Evan You (mantan Google) tahun 2014, Vue terkenal sebagai "React yang…

Vue adalah framework JavaScript untuk membangun tampilan web. Kamu menulis datanya dan bentuk tampilannya, lalu Vue yang menjaga halaman supaya selalu cocok dengan datanya. Bayangin papan harga digital di Warung Bu Sri. Bu Sri cukup mengganti harga es teh di buku kasir, dan papan di depan warung ikut berganti sendiri. Gak ada yang naik tangga buat mengecat ulang angkanya. Di Vue, buku kasirnya adalah data, papannya adalah halaman, dan yang mengganti papan itu Vue. Sepanjang track Vue ini kita membangun satu contoh yang sama: menu dan keranjang Warung Bu Sri.

🧪 Tebakan cepat: Harga es teh disimpan di const harga = ref(5000) dan tampil lewat <span>Rp{{ harga }}</span>. Satu baris di script menjalankan harga.value = 5500. Perlu nulis kode tambahan supaya <span>-nya ikut berubah? Tebak dulu, jawabannya ada di bagian "Data berubah, tampilan ikut".

Tanpa Vue: kamu yang mengurus DOM

Dengan JavaScript biasa, mengubah data dan mengubah halaman adalah dua pekerjaan terpisah:

let harga = 5000
const span = document.querySelector("#harga")
span.textContent = "Rp" + harga

function naikkanHarga() {
  harga = harga + 500
  // lupa baris ini, layarnya tetap Rp5000
  span.textContent = "Rp" + harga
}

harga = harga + 500 cuma mengubah variabel di memori. Halaman gak tahu apa-apa.
span.textContent = ... adalah baris yang benar-benar mengganti teks di halaman. Kamu wajib menulisnya sendiri.
Kalau harga tampil di tiga tempat (menu, keranjang, struk), kamu butuh tiga baris update. Lupa satu, halamannya bohong.

Dengan Vue: tulis data dan template

Di Vue, satu bagian tampilan beserta datanya disebut komponen. Begini komponen papan harga di editor latihan BelajarWeb.dev:

const harga = ref(5000)

function naikkanHarga() {
  harga.value = harga.value + 500
}

---template---
<h2>Warung Bu Sri</h2>
<p>Es Teh: <span id="harga">Rp{{ harga }}</span></p>
<button @click="naikkanHarga">Naikkan harga</button>

Bagian di atas garis ---template--- adalah script: data dan fungsi komponen.
ref(5000) membuat data reaktif, data yang diawasi Vue. Di script, nilainya dibaca dan diubah lewat .value.
Bagian di bawah garis adalah template: HTML yang boleh memakai sintaks Vue.
{{ harga }} (dua pasang kurawal) menaruh nilai harga di situ. Di template gak perlu .value, Vue yang membukanya.
@click="naikkanHarga" memanggil fungsi itu saat tombol diklik. Event dibahas lengkap di pelajaran berikutnya.
Di editor latihan, ref sudah tersedia. Baris import boleh ditulis seperti di proyek sungguhan, tapi gak wajib.

Data berubah, tampilan ikut

Kejadian	`harga.value`	Yang tampil di `<span>`
Halaman pertama tampil	5000	Rp5000
Klik Naikkan harga	5500	Rp5500
Klik lagi	6000	Rp6000

Gak perlu kode tambahan. Itu jawaban tebakannya. Waktu template ditampilkan pertama kali, Vue mencatat bahwa komponen ini membaca harga. Begitu harga.value berubah, Vue menjalankan template-nya lagi, membandingkan hasilnya dengan halaman, lalu cuma mengganti bagian yang beda: teks di <span>. Kemampuan ini namanya reaktivitas (reactivity): data berubah, tampilan ikut. Kalau harga dipakai di tiga tempat, ketiganya diperbarui sekaligus.

createApp dan mount di proyek sungguhan

Di editor latihan, BelajarWeb.dev yang memasang komponenmu ke halaman. Di proyek sungguhan (dibuat dengan npm create vue@latest), kamu yang memasangnya di main.js:

// main.js
import { createApp } from "vue"
import App from "./App.vue"

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

<!-- index.html -->
<div id="app"></div>

createApp(App) membuat aplikasi Vue dengan App sebagai komponen paling luar, disebut root component.
.mount("#app") memasang aplikasinya ke elemen yang cocok dengan selector CSS #app, yaitu <div id="app">. Isinya diganti tampilan dari Vue.
Selector-nya aturan CSS biasa: #app artinya id app. Tanpa #, "app" mencari tag <app>, gak ketemu, dan halamannya kosong. Di mode development, console menulis [Vue warn]: Failed to mount app: mount target selector "app" returned null. Editor latihan dan Playground memakai build production, yang gak menulis [Vue warn] sama sekali, jadi peringatan seperti ini cuma muncul di proyekmu sendiri saat npm run dev.
Komponen juga bisa berupa object, misalnya createApp({ template: "<h1>Halo</h1>" }).mount("#app"). Ini jalan kalau Vue yang dimuat versi yang bisa menerjemahkan template di browser, seperti di editor latihan.

Siapa yang bikin Vue, dan kenapa dipakai

Vue dibuat oleh Evan You dan dirilis tahun 2014. Sekarang dikembangkan tim inti dan komunitas open source. Versi yang dipakai di track ini Vue 3.5.
Vue disebut progresif: bisa dipasang ke satu bagian halaman saja, bisa juga jadi aplikasi utuh lengkap dengan Vue Router (pindah halaman) dan Pinia (data bersama).
Ada dua gaya menulis komponen. Composition API dengan <script setup> dan ref(), gaya modern yang dipakai di track ini. Options API dengan data() dan methods, gaya lama yang masih sering ketemu di tutorial Vue 2.

⚠️ Jebakan yang sering ketemu

mount("app") tanpa #. Selector tanpa # mencari tag <app>, bukan id. Hasilnya halaman kosong. Tulis mount("#app").
Lupa import { ref } from "vue" di proyek sungguhan. Editor latihan menyediakan ref tanpa import, tapi di file .vue sungguhan baris itu wajib. Tanpanya, halaman berhenti dengan ReferenceError: ref is not defined.
{{ harga.value }} di template. Template sudah membuka ref-nya, jadi harga di sana sudah angka 5000. Angka gak punya .value, hasilnya undefined, dan yang tampil kosong. Di template cukup {{ harga }}.
Menyimpan data di variabel biasa. let harga = 5000 tampil sekali, tapi perubahannya gak pernah sampai ke layar. Data yang harus mengubah tampilan dibuat dengan ref().

TL;DR: Vue adalah framework JavaScript buatan Evan You (2014) untuk membangun tampilan dari komponen. Komponen punya script (data dan fungsi) dan template (HTML plus sintaks Vue). const harga = ref(5000) membuat data reaktif: di script dibaca lewat harga.value, di template cukup {{ harga }}. Begitu datanya berubah, Vue memperbarui bagian halaman yang membacanya, tanpa kamu menyentuh DOM. Itu reaktivitas. Di proyek sungguhan, aplikasi dibuat dan dipasang dengan createApp(App).mount("#app"), dan selector-nya wajib pakai #. Di editor latihan, tulis script, garis ---template---, lalu template, tanpa baris import.

Apa itu Vue? — Vue