Vue Academy · Pelajaran

Interpolasi dan Direktif

Gunakan interpolasi kurung kurawal dan direktif inti dalam template.

Interpolasi dan Direktif adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 3 pelajaran total.

Gambaran Umum Sintaks Templat

Templat Vue adalah HTML yang valid dan diperkaya dengan sintaks khusus:

Interpolasi Mustache untuk teks
Direktif (atribut berawalan v-) untuk perilaku

Vue mengompilasi semua ini menjadi fungsi perenderan yang efisien.

Interpolasi Mustache

Kurung kurawal ganda, atau sintaks mustache, menghasilkan teks.

Isinya adalah ekspresi JavaScript, bukan sekadar nama variabel.

<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>

v-bind untuk Atribut

Mustache tidak berfungsi di dalam atribut HTML. Gunakan v-bind untuk mengikat data ke atribut.

<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>

Bentuk Singkat v-bind

v-bind sangat umum digunakan sehingga memiliki bentuk singkat: cukup gunakan titik dua.

<!-- Full syntax -->
<a v-bind:href="url">Link</a>

<!-- Shorthand -->
<a :href="url">Link</a>

v-on untuk Peristiwa

Direktif v-on mendengarkan peristiwa DOM dan menjalankan penangan.

<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>

Bentuk Singkat v-on

v-on juga memiliki bentuk singkat: simbol at.

<!-- Full syntax -->
<button v-on:click="save">Save</button>

<!-- Shorthand -->
<button @click="save">Save</button>

Penangan Sebaris vs Penangan Metode

Penangan peristiwa dapat berupa ekspresi sebaris atau nama metode.

<!-- Inline expression -->
<button @click="count++">Add</button>

<!-- Method handler -->
<button @click="increment">Add</button>

<!-- Inline with the event object -->
<button @click="log($event)">Log</button>

v-text

Direktif v-text menetapkan isi teks suatu elemen. Direktif ini setara dengan mustache.

<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>

v-html

Direktif v-html menampilkan string sebagai HTML sungguhan, bukan teks dengan karakter khusus yang diamankan.

<div v-html="rawHtml"></div>

<!-- If rawHtml = "<b>Bold</b>",
     it renders actual bold text -->

v-html dan Peringatan XSS

Peringatan: v-html berbahaya jika digunakan dengan konten yang tidak tepercaya.

Direktif ini dapat menyisipkan skrip berbahaya (serangan XSS)
Gunakan hanya pada konten yang sepenuhnya Anda percayai
Jangan pernah menampilkan HTML yang dikirim langsung oleh pengguna

Untuk teks biasa, selalu utamakan interpolasi mustache karena interpolasi ini mengamankan HTML.

Argumen Direktif

Beberapa direktif menerima argumen setelah titik dua, misalnya untuk menentukan atribut atau peristiwa.

<!-- argument is the attribute name -->
<a :href="url">Link</a>

<!-- argument is the event name -->
<button @click="run">Run</button>

<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>

Pemeriksaan Singkat

Uji pemahaman Anda tentang interpolasi dan direktif.

Rangkuman: Interpolasi dan Direktif

Anda telah mempelajari dasar-dasar templat Vue:

{{ }} mustache menghasilkan ekspresi teks
v-bind (bentuk singkat :) mengikat atribut
v-on (bentuk singkat @) menangani peristiwa
v-text menetapkan isi teks
v-html menampilkan HTML mentah (risiko XSS, gunakan dengan hati-hati)

Berikutnya: kondisi dan perulangan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Interpolasi dan Direktif” gratis?

Ya — teks lengkap “Interpolasi dan Direktif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Interpolasi dan Direktif”?

Gunakan interpolasi kurung kurawal dan direktif inti dalam template. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.

Berapa lama pelajaran “Interpolasi dan Direktif” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy