Template Syntax Dasar — CompileDaily Study

Penjelasan

Vue memakai template HTML biasa yang diperkaya syntax khusus: {{ ekspresi }} untuk menampilkan data (text interpolation), dan v-bind:atribut (atau singkatannya :atribut) untuk mengikat nilai JavaScript ke atribut HTML seperti src, href, atau class.

Contoh Konsep

<script setup>
const nama = 'CompileDaily';
const urlGambar = '/logo.png';
</script>

<template>
    <h1>Halo, {{ nama }}!</h1>
    <img :src="urlGambar" :alt="nama">
    <p>Hasil 2 + 2 = {{ 2 + 2 }}</p>
</template>

Praktikum

Buat komponen dengan variabel kota dan populasi di <script setup>. Tampilkan keduanya di <template> lewat {{ }}, termasuk satu ekspresi hitung-hitungan sederhana (mis. populasi / 1000).

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

{{ }} HANYA bisa dipakai di dalam teks/konten elemen, BUKAN di dalam atribut HTML — untuk atribut, WAJIB pakai v-bind:atribut atau singkatannya :atribut, mis. :src="urlGambar" bukan src="{{ urlGambar }}".