Template Dasar — Vue

Interpolasi Gunakan {{ }} (mustache) untuk menampilkan data di template: const nama = ref("Budi") const tahun = ref(2026) ---template--- Halo, {{ nama }}! Tahun

Interpolasi

Gunakan {{ }} (mustache) untuk menampilkan data di template:

const nama = ref("Budi")
const tahun = ref(2026)

---template---
<div>
  <h1>Halo, {{ nama }}!</h1>
  <p>Tahun: {{ tahun }}</p>
  <p>2 + 3 = {{ 2 + 3 }}</p>
</div>

v-bind (Binding Atribut)

const url = ref("https://vuejs.org")

---template---
<a v-bind:href="url">Vue.js</a>
<!-- shorthand: -->
<a :href="url">Vue.js</a>

v-html (Raw HTML)

const htmlContent = ref("<strong>Tebal</strong>")

---template---
<p v-html="htmlContent"></p>

Hati-hati dengan v-html — hanya gunakan untuk konten yang kamu percaya.

Yang akan kamu pelajari