Direktif Khusus
Daftarkan direktif global dan lokal dengan hook siklus hidup seperti mounted dan updated untuk merangkum logika manipulasi DOM di luar komponen.
Direktif Khusus adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Directive?
Directive adalah logika manipulasi DOM yang dapat digunakan kembali dan dipasang ke elemen melalui prefiks v-. Contoh bawaan: v-if, v-for, v-model, v-show. Directive khusus memungkinkan Anda membuat directive sendiri.
Kasus Penggunaan: Fokus Otomatis
Directive dapat merangkum sedikit manipulasi DOM yang tidak memerlukan komponen pembungkus.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Pendaftaran Directive Lokal
Dalam <script setup>, deklarasikan directive dengan prefiks v—Vue akan mendaftarkannya secara otomatis di tingkat lokal.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Pendaftaran Directive Global
Gunakan app.directive(name, definition) agar directive tersedia di mana saja.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Hook Siklus Hidup Directive
Directive memiliki hook yang mencerminkan siklus hidup komponen: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};Objek binding
Hook menerima objek binding: value, oldValue, arg, modifiers, instance.
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }Contoh Nyata: v-click-outside
Directive yang umum—panggil penangan saat pengguna mengeklik di luar elemen.
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => {
if (!el.contains(e.target)) binding.value(e);
};
document.addEventListener('click', el._handler);
},
unmounted(el) {
document.removeEventListener('click', el._handler);
}
};
// Usage:
<div v-click-outside="closeMenu">...</div>Contoh Nyata: v-tooltip
Pasang tooltip Tippy/Popper melalui directive—template tetap rapi.
import tippy from 'tippy.js';
const vTooltip = {
mounted(el, binding) {
el._tippy = tippy(el, { content: binding.value });
},
updated(el, binding) {
el._tippy?.setContent(binding.value);
},
unmounted(el) {
el._tippy?.destroy();
}
};v-debounce: Membatasi Laju Event Input
Pasang debounce di sekitar penangan @input milik input dengan directive khusus.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Directive vs Komponen vs Composable
Composable: logika berstatus (data, ref). Komponen: struktur UI yang dapat digunakan kembali dengan template sendiri. Directive: perilaku DOM murni pada elemen yang sudah ada. Pilih directive jika tidak diperlukan template atau markup.
Pertimbangan Kinerja
Directive berjalan pada setiap pembaruan. Buat directive tetap ringan. Untuk operasi mahal, gunakan binding.value !== binding.oldValue agar pekerjaan yang tidak diperlukan dapat dilewati.
Pemeriksaan Singkat
Apa perbedaan antara menggunakan directive Vue dan komponen Vue untuk menambahkan perilaku?
Ringkasan: Directive Khusus
Logika DOM yang dapat digunakan kembali dengan prefiks v. Daftarkan secara lokal (konstanta vName dalam script setup) atau global (app.directive). Hook siklus hidup: mounted, updated, unmounted. binding menyediakan value, oldValue, arg, dan modifiers. Gunakan untuk perilaku DOM murni (focus, click-outside, tooltip, debounce). Komponen untuk markup; composable untuk logika berstatus; directive untuk menambahkan kemampuan DOM.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Direktif Khusus” gratis?
Ya — teks lengkap “Direktif Khusus” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Direktif Khusus”?
Daftarkan direktif global dan lokal dengan hook siklus hidup seperti mounted dan updated untuk merangkum logika manipulasi DOM di luar komponen. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 3 dari 4.
Berapa lama pelajaran “Direktif Khusus” 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- provide() dan inject() untuk Injeksi Dependensi
- Komponen Asinkron dan Suspense
- Direktif Khusus
- Sistem Plugin: app.use()