Arahan Tersuai
Daftarkan arahan global dan tempatan dengan hook kitar hayat seperti mounted dan updated untuk merangkum logik manipulasi DOM di luar komponen.
Arahan Tersuai ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah Arahan?
Arahan ialah logik manipulasi DOM yang boleh digunakan semula dan dilampirkan pada elemen melalui awalan v-. Contoh terbina dalam: v-if, v-for, v-model, v-show. Arahan tersuai membolehkan anda membina arahan sendiri.
Kes Penggunaan: Fokus Automatik
Arahan boleh merangkum sedikit manipulasi DOM yang terlalu kecil untuk memerlukan komponen pembungkus.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Pendaftaran Arahan Tempatan
Dalam <script setup>, isytiharkan arahan dengan awalan v — Vue mendaftarkannya secara automatik secara tempatan.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Pendaftaran Arahan Global
Gunakan app.directive(name, definition) untuk menjadikan arahan tersedia di mana-mana.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Hook Kitar Hayat Arahan
Arahan mempunyai hook yang mencerminkan kitar hayat 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 Sebenar: v-click-outside
Arahan yang biasa digunakan — panggil pengendali apabila pengguna mengklik 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 Sebenar: v-tooltip
Pasangkan petua alat Tippy/Popper melalui arahan — templat kekal kemas.
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: Mengehadkan Peristiwa Masukan
Gunakan debounce di sekeliling pengendali @input bagi masukan dengan arahan tersuai.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Arahan berbanding Komponen berbanding Composable
Composable: logik berkeadaan seperti data dan ref. Komponen: struktur UI yang boleh digunakan semula dengan templat sendiri. Arahan: tingkah laku DOM tulen pada elemen sedia ada. Pilih arahan apabila tiada templat atau markup diperlukan.
Pertimbangan Prestasi
Arahan dijalankan pada setiap kemas kini. Pastikan kosnya rendah. Untuk operasi mahal, semak binding.value !== binding.oldValue bagi melangkau kerja yang tidak diperlukan.
Semakan Pantas
Apakah perbezaan antara menggunakan arahan Vue dengan komponen Vue untuk menambahkan tingkah laku?
Imbas Kembali: Arahan Tersuai
Logik DOM boleh digunakan semula dengan awalan v. Daftarkan secara tempatan (pemalar vName dalam script setup) atau secara global (app.directive). Hook kitar hayat: mounted, updated, unmounted. binding menyediakan value, oldValue, arg dan modifiers. Gunakan untuk tingkah laku DOM tulen seperti fokus, klik di luar, petua alat dan debounce. Komponen untuk markup; composable untuk logik berkeadaan; arahan untuk penambahan DOM.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Arahan Tersuai” percuma?
Ya — teks penuh “Arahan Tersuai” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Arahan Tersuai”?
Daftarkan arahan global dan tempatan dengan hook kitar hayat seperti mounted dan updated untuk merangkum logik manipulasi DOM di luar komponen. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Arahan Tersuai” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- provide() dan inject() untuk Suntikan Kebergantungan
- Komponen Tak Segerak dan Suspense
- Arahan Tersuai
- Sistem Pemalam: app.use()