Vue.js untuk Pemula: Framework Progresif

<template>
  <div>
    <!-- v-if: elemen benar-benar ditambah/dihapus dari DOM -->
    <div v-if="isLoggedIn">
      <p>Selamat datang, {{ user.name }}!</p>
      <button @click="logout">Logout</button>
    </div>

    <!-- v-else-if dan v-else -->
    <div v-else-if="isLoading">
      <p>⏳ Memuat data...</p>
    </div>

    <div v-else>
      <p>Silakan login untuk melanjutkan.</p>
      <button @click="login">Login</button>
    </div>

    <!-- v-show: elemen selalu ada di DOM, hanya display:none -->
    <div v-show="showNotifikasi">
      <p>🔔 Ada pesan baru!</p>
    </div>

    <!-- Perbedaan: v-if vs v-show -->
    <!-- v-if → cocok untuk kondisi jarang berubah (hemat DOM) -->
    <!-- v-show → cocok untuk toggle cepat (hemat render ulang) -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isLoggedIn = ref(false);
const isLoading = ref(false);
const showNotifikasi = ref(true);
const user = ref({ name: 'Budi' });

function login() { isLoggedIn.value = true; }
function logout() { isLoggedIn.value = false; }
</script>

<template>
  <div>
    <!-- v-for dengan array -->
    <ul>
      <li v-for="(buah, index) in buahList" :key="buah.id">
        {{ index + 1 }}. {{ buah.nama }} - Rp {{ buah.harga.toLocaleString() }}
      </li>
    </ul>

    <!-- v-for dengan object -->
    <div v-for="(nilai, kunci, index) in profil" :key="kunci">
      <strong>{{ index }}. {{ kunci }}:</strong> {{ nilai }}
    </div>

    <!-- v-for dengan range -->
    <span v-for="n in 5" :key="n">{{ n }} </span>
    <!-- Output: 1 2 3 4 5 -->

    <!-- v-for + v-if (HATI-HATI!) -->
    <!-- Vue 3: v-if punya prioritas lebih tinggi dari v-for -->
    <li v-for="item in items" :key="item.id" v-if="item.aktif">
      {{ item.nama }}
    </li>
    <!-- Lebih baik gunakan computed property untuk filter -->
    <li v-for="item in activeItems" :key="item.id">
      {{ item.nama }}
    </li>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const buahList = ref([
    { id: 1, nama: 'Apel', harga: 15000 },
    { id: 2, nama: 'Mangga', harga: 20000 },
    { id: 3, nama: 'Jeruk', harga: 12000 },
    { id: 4, nama: 'Pisang', harga: 8000 }
]);

const profil = ref({
    nama: 'Budi Santoso',
    email: 'budi@beebane.com',
    kota: 'Jakarta'
});

const items = ref([
    { id: 1, nama: 'Item A', aktif: true },
    { id: 2, nama: 'Item B', aktif: false },
    { id: 3, nama: 'Item C', aktif: true }
]);

// Filter dengan computed property (lebih baik dari v-if di dalam v-for)
const activeItems = computed(() =>
    items.value.filter(item => item.aktif)
);
</script>

<template>
  <div>
    <!-- v-on / @ untuk event handling -->
    <button @click="handleClick">Klik Saya</button>
    <button @click="handleClick($event)">Dengan Event Object</button>
    <button @click.prevent="handleSubmit">Prevent Default</button>
    <button @click.once="hanyaSekali">Hanya Sekali</button>

    <!-- Event modifiers -->
    <!-- .stop    → event.stopPropagation() -->
    <!-- .prevent → event.preventDefault() -->
    <!-- .once    → handler hanya jalan sekali -->
    <!-- .capture → gunakan capture phase -->
    <!-- .self    → hanya trigger jika event dari elemen ini -->

    <!-- Key modifiers -->
    <input @keyup.enter="submitForm">
    <input @keyup.esc="cancel">
    <input @keyup.ctrl.s="save">

    <!-- v-model: Two-way binding -->
    <input v-model="nama" placeholder="Masukkan nama">
    <p>Nama: {{ nama }}</p>

    <!-- v-model dengan textarea -->
    <textarea v-model="bio" placeholder="Bio"></textarea>

    <!-- v-model dengan checkbox -->
    <input type="checkbox" v-model="setuju" id="agree">
    <label for="agree">Saya setuju</label>

    <!-- v-model dengan select -->
    <select v-model="kota">
      <option disabled value="">Pilih kota</option>
      <option>Jakarta</option>
      <option>Bandung</option>
      <option>Surabaya</option>
    </select>

    <!-- v-model dengan radio -->
    <input type="radio" v-model="gender" value="L"> Laki-laki
    <input type="radio" v-model="gender" value="P"> Perempuan

    <!-- v-model modifiers -->
    <input v-model.trim="search">    <!-- Trim otomatis -->
    <input v-model.number="umur">    <!-- Konversi ke number -->
    <input v-model.lazy="query">     <!-- Update saat blur, bukan saat ketik -->
  </div>
</template>

<script setup>
import { ref } from 'vue';

const nama = ref('');
const bio = ref('');
const setuju = ref(false);
const kota = ref('');
const gender = ref('');
const search = ref('');
const umur = ref(0);
const query = ref('');

function handleClick(event) {
    console.log('Diklik!', event.target);
}
function handleSubmit() { console.log('Submit!'); }
function hanyaSekali() { console.log('Hanya jalan sekali!'); }
function submitForm() { console.log('Enter ditekan!'); }
function cancel() { console.log('Escape ditekan!'); }
function save() { console.log('Ctrl+S ditekan!'); }
</script>