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:

rreee

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 bernama my-directive dan hantar definisi arahan kepada fungsi. Dalam contoh ini, kami hanya menentukan cangkuk beforeMount, 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 awalan v-. Contohnya:

import { Directive } from 'vue'

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  }
}

Vue.directive('my-directive', myDirective)

Dalam contoh ini, kami menggunakan v-my-directive untuk mengikat arahan tersuai kami kepada elemen <div>. Apabila tika Vue melekapkan elemen, cangkuk beforeMount akan dipanggil.

Ringkasan

Dalam Vue3, arahan menjadi API berasaskan fungsi untuk mencipta arahan tersuai dengan menggunakan fungsi arahan. Arahan tersuai boleh digunakan dalam elemen, komponen atau nod DOM lain untuk melanjutkan fungsi Vue.

Fungsi arahan mempunyai enam cangkuk kitaran hayat, yang dipetakan kepada keadaan arahan yang berbeza. Pembangun boleh memilih untuk menggunakan fungsi cangkuk yang sesuai untuk melaksanakan operasi pada peringkat tertentu.

Walaupun tujuan utama arahan adalah untuk melaksanakan operasi DOM dan gelagat interaktif, menggunakan arahan tersuai pembangun boleh dengan mudah merangkum gelagat tertentu tertentu dalam arahan dan kemudian melaksanakannya dengan hanya memanggil arahan dalam templat Gelagat ini membuat kod lebih ringkas, lebih mudah diselenggara dan dikembangkan.

Atas ialah kandungan terperinci Fungsi arahan dalam Vue3: Arahan tersuai memanjangkan fungsi Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!