Fungsi arahan dalam Vue3: Arahan tersuai memanjangkan fungsi Vue3

Vue3 ialah versi Vue yang terkini Berbanding dengan Vue2, ia telah dinaik taraf dan dipertingkatkan dalam banyak aspek Salah satu penambahbaikan ialah fungsi arahan. Fungsi arahan ialah fungsi baharu dalam Vue3 Ia boleh digunakan untuk menyesuaikan arahan untuk melanjutkan fungsi Vue3.

Apakah perintah itu? Arahan

ialah atribut komponen khas yang disediakan oleh Vue, yang digunakan untuk menambah gelagat tertentu pada templat. Arahan boleh dianggap sebagai arahan biasa dalam AngularJS yang beroperasi pada elemen, mengubah penampilan atau tingkah lakunya. Contohnya, v-if biasa, v-for, v-bind, dsb. dalam Vue adalah semua arahan.

Arahan dalam Vue3 adalah berasaskan fungsi. Ini bermakna kita boleh menggunakan fungsi untuk membuat arahan tersuai. Fungsi arahan ini perlu digabungkan dengan Vue sebelum aplikasi dimulakan dan boleh digunakan dalam elemen, komponen atau nod DOM lain. Format sintaks bagi fungsi perintah

adalah seperti berikut:

Fungsi arahan ditakrifkan dengan mencipta objek. Objek ini mempunyai enam kaedah, mewakili peringkat perintah yang berbeza semasa melekap, mengemas kini dan menyahlekap. Setiap kaedah mempunyai tiga parameter, iaitu elemen, objek pengikat dan nod maya.

Dalam kod di atas, kita dapat melihat bahawa setiap fungsi mempunyai tiga parameter:

• el (HTMLElement): elemen yang arahan terikat. (Contohnya: apabila menggunakan arahan v-myDirective, el ialah elemen yang terikat pada arahan)
• mengikat (DirectiveBinding): objek yang mengandungi maklumat arahan. (Contohnya: Mengandungi nama, nilai, parameter, dsb. bagi arahan)
• vnode (VNode): nod maya yang dijana oleh Vue. (Contohnya: apabila menggunakan arahan v-myDirective, vnode ialah nod maya bagi komponen atau elemen yang mengandungi arahan)

Seterusnya, mari kita lihat cara membuat arahan tersuai.

Buat arahan tersuai

Untuk mencipta arahan tersuai, kita perlu menggunakan fungsi arahan yang disediakan oleh Vue:

const myDirective: Directive = { beforeMount(el, binding, vnode) { // ... }, mounted(el, binding, vnode) { // ... }, beforeUpdate(el, binding, vnode, prevVnode) { // ... }, updated(el, binding, vnode, prevVnode) { // ... }, beforeUnmount(el, binding, vnode) { // ... }, unmounted(el, binding, vnode) { // ... } }

Dalam contoh ini, kami menggunakan arahan fungsi untuk mencipta arahan tersuai bernamamy-directivedan hantar definisi arahan kepada fungsi. Dalam contoh ini, kami hanya menentukan cangkukbeforeMount, yang bermaksud bahawa fungsi arahan ini akan dipanggil semasa proses pelekapan tika Vue. Anda boleh memilih fungsi cangkuk mengikut keperluan anda.

Menggunakan Arahan Tersuai

Setelah kami menentukan arahan tersuai, kami boleh menggunakannya dalam templat Vue kami. Kita boleh mengikat arahan menggunakan atribut HTML tertentu, yang dalam Vue bermula dengan awalanv-. Contohnya:

import { Directive } from 'vue' const myDirective: Directive = { beforeMount(el, binding, vnode) { // ... } } Vue.directive('my-directive', myDirective)

Dalam contoh ini, kami menggunakanv-my-directiveuntuk mengikat arahan tersuai kami kepada elemen