Bagaimanakah anda membuat arahan tersuai?

Question

Accepted Answer

**Arahan tersuai** membolehkan anda mengenkapsulasi **manipulasi DOM tingkat rendah** sebagai atribut `v-*` yang dapat digunakan kembali. Gunakannya apabila anda memerlukan akses langsung ke elemen (fokus, tatal, perpustakaan DOM pihak ketiga) — perkara yang komponen/props tidak secara semula jadi liputi. ## Mentakrifkan arahan tempatan ```vue ``` Konvensi penamaan: pembolehubah `vFocus` menjadi arahan `v-focus`. ## Kail arahan (cermin kitaran hayat komponen) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## Menggunakan nilai pengikatan dan hujah ```vue ``` Objek `binding` membawa `value` (ungkapan), `arg` (selepas kolon), `modifiers` (selepas titik), dan `oldValue`. ## Contoh praktikal: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## Pendaftaran global ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Mengapa Penting Arahan tersuai ialah alat yang tepat untuk **tingkah laku DOM yang dapat digunakan kembali dan tingkat rendah** — autofokus, click-outside, pemuatan malas imej, tooltip, mengintegrasikan perpustakaan DOM bukan Vue. Mereka menyimpan logik DOM wajib sedemikian yang dienkapsulasi dan deklaratif (`v-click-outside`) daripada tersebar dalam kail kitaran hayat. Mengetahui kail dan objek `binding` (nilai/arg/pengubah suai), ditambah pembersihan dalam `unmounted`, menutup penggunaan praktikal mereka — walaupun untuk kebanyakan logik UI, komponen masih merupakan pilihan yang lebih baik.