Menulis Direktif Khusus
app.directive(), hook mounted/updated/unmounted, argumen dan pengubah direktif.
Menulis Direktif Khusus adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Saat Komponen Tidak Cukup
Sebagian besar penggunaan ulang di Vue dilakukan melalui komponen dan komposabel. Namun, beberapa logika menargetkan DOM mentah—seperti memfokuskan kolom masukan secara otomatis, mengintegrasikan pustaka non-Vue, atau mengukur elemen. Direktif kustom dibuat khusus untuk hal ini.
Direktif Minimal
Daftarkan direktif pada aplikasi dengan app.directive. Kait mounted menerima elemen, sehingga direktif ini memfokuskan kolom masukan saat kolom tersebut muncul.
const app = createApp(App)
app.directive('focus', {
mounted(el) { el.focus() }
})Menggunakan Direktif
Terapkan direktif dalam templat dengan awalan v- ditambah nama yang didaftarkan.
<template>
<input v-focus />
</template>Direktif Lokal dalam script setup
Di dalam <script setup>, setiap variabel tingkat atas yang diawali v dan menggunakan camelCase menjadi direktif yang dapat digunakan. Beri nama vFocus dan gunakan sebagai v-focus.
<script setup>
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>Objek Pengikatan
Setiap kait menerima objek binding sebagai argumen keduanya. Objek ini membawa nilai, argumen, dan pengubah direktif yang diteruskan dalam templat.
app.directive('demo', {
mounted(el, binding) {
console.log(binding.value, binding.arg, binding.modifiers)
}
})Meneruskan Nilai
Ekspresi setelah tanda sama dengan menjadi binding.value. Di sini, sebuah warna diteruskan dan diterapkan pada elemen.
<!-- template -->
<p v-color="'red'">Hello</p>
<!-- directive -->
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value }
})Meneruskan Argumen
Bagian setelah titik dua menjadi binding.arg. Bagian ini memungkinkan satu direktif berperilaku berbeda berdasarkan sebuah label.
<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>Menggunakan Pengubah
Pengubah muncul setelah tanda titik dan diterima dalam binding.modifiers sebagai peta nilai benar/salah. Gunakan pengubah untuk menyesuaikan perilaku.
<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>Kait Siklus Hidup Direktif
Direktif memiliki kait yang mencerminkan siklus hidup komponen: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, dan unmounted.
Merespons Pembaruan
Kait updated berjalan setelah elemen dirender ulang. Bandingkan binding.value dengan binding.oldValue agar hanya bertindak saat terjadi perubahan nyata, lalu lakukan pembersihan di unmounted.
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value },
updated(el, binding) {
if (binding.value !== binding.oldValue) el.style.color = binding.value
}
})Direktif vs Komponen
Utamakan komponen untuk apa pun yang melibatkan struktur atau status. Gunakan direktif hanya saat Anda memerlukan akses DOM langsung tingkat rendah yang tidak sesuai dengan komponen, seperti pengelolaan fokus atau widget DOM pihak ketiga.
Pemeriksaan Singkat
Uji pengetahuan Anda tentang direktif kustom.
Ringkasan
Anda telah belajar membuat direktif kustom:
- Daftarkan secara global dengan
app.directiveatau secara lokal sebagaivNamedalam script setup. binding.value,binding.arg, danbinding.modifiersmeneruskan data ke dalam.- Kait siklus hidup: dibuat, beforeMount, dipasang, beforeUpdate, diperbarui, beforeUnmount, dilepas.
- Gunakan direktif untuk pekerjaan DOM tingkat rendah; selain itu, utamakan komponen.
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
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menulis Direktif Khusus” gratis?
Ya — teks lengkap “Menulis Direktif Khusus” 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 4 pelajaran total.
Apa yang akan aku pelajari di “Menulis Direktif Khusus”?
app.directive(), hook mounted/updated/unmounted, argumen dan pengubah direktif. 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 4 dari 4.
Berapa lama pelajaran “Menulis 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 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
- v-model: Bagian Internal Binding Dua Arah
- Pengubah Peristiwa v-on
- Binding Dinamis dan Banyak Binding dengan v-bind
- Menulis Direktif Khusus