Cara menggunakan arahan tersuai untuk melaksanakan operasi DOM dalam Vue

Vue ialah rangka kerja JavaScript yang sangat popular yang boleh digunakan untuk membina aplikasi satu halaman (SPA) berprestasi tinggi dan boleh skala. Salah satu ciri yang berkuasa ialah arahan tersuai, yang merupakan pengembangan berdasarkan arahan teras Vue (model v, v-jika, v-untuk, dll.), yang boleh digunakan untuk menambah gelagat pada elemen DOM. Dalam artikel ini, kita akan mempelajari cara menggunakan arahan tersuai dalam Vue untuk melaksanakan operasi DOM.

1. Buat arahan tersuai

Anda boleh menggunakan fungsi arahan Vue untuk mencipta arahan tersuai. Fungsi arahan mesti mengembalikan objek yang mengandungi berbilang fungsi cangkuk (cangkuk) yang mengawal tingkah laku arahan. Berikut ialah templat untuk arahan tersuai:

Vue.directive("directive-name", {
bind: function (el, binding, vnode) {

// 在绑定元素和指令之间建立联接时触发

},
disisipkan: fungsi (el, binding, vnode) {

// 元素插入父元素之后触发

},
kemas kini: function (el, binding, vnode, oldVnode) {

// 在元素和指令所绑定的组件的 VNode 更新之后调用

},
componentUpdated: fungsi (el, binding, vnode, oldVnode) {

// 在组件的 VNode 及其子 VNode 全部更新后调用

},
unbind: function (el, binding, vnode) {

// 解绑时触发

}
}) ;

2. Menggunakan arahan tersuai

Terdapat dua cara untuk menggunakan arahan tersuai dalam Vue:

2.1.1 mendaftarkan arahan tersuai bermakna menambah fungsi arahan tersuai pada senarai fungsi arahan global contoh Vue. Dengan cara ini, anda boleh menggunakan arahan tersuai dalam semua komponen.

Gunakan sintaks Vue.directive() untuk mendaftarkan arahan secara global:

Vue.directive("directive-name", {

//...

});

Kemudian dalam HTML, anda boleh menggunakan arahan tersuai dengan cara berikut:

232732ea76785df2167c2360d5ae901616b28748ea4df4d9c2150843fecfba68

2.2 Pendaftaran separa

Arahan pendaftaran tempatan merujuk kepada penambahan fungsi arahan pada atribut arahan komponen Vue. Dengan cara ini, anda boleh menggunakan arahan tersuai dalam komponen.

Berikut ialah contoh mendaftarkan arahan secara setempat dalam komponen Vue:

Vue.component('my-component', {

directives: {

'directive-name': {
  // ...
}

}

})

Kemudian dalam HTML anda boleh menggunakan arahan tersuai melalui:

71355d542cba832b45d1d1a33ea0ade4929427e91c7b6d39a8a1a066418cbff2

Contoh arahan tersuai

3. Di bawah, kami akan memperkenalkan beberapa senario biasa menggunakan arahan tersuai.

3.1. Auto Fokus

Apabila kotak input dipaparkan pada halaman, biasanya kotak input akan memfokus secara automatik. Kita boleh mencapai fungsi ini melalui arahan tersuai. Berikut ialah contoh arahan autofokus:

Vue.directive('focus', {

inserted: function(el) {

el.focus()

}

})

Dalam HTML, anda hanya perlu menambah arahan v-fokus untuk mencapai fokus automatik:

2ba73390b5480b7e67e450ba4b9788dc

3.2 >

Pemuatan tatal ialah kaedah pemuatan tatal tak terhingga yang biasa Apabila pengguna menatal ke bahagian bawah halaman, ia akan mencetuskan pemuatan lebih banyak data. Kita boleh mencapai fungsi ini melalui arahan tersuai. Berikut ialah contoh arahan pemuatan bergulir:

Vue.directive('scroll', {

inserted: function (el, binding) {

window.addEventListener('scroll', function() {
  if ((window.innerHeight + window.pageYOffset+ 50) >= document.body.offsetHeight) {
    binding.value()
  }
})

}
} )

Dalam HTML, anda boleh menambah pemuatan menatal melalui arahan v-scroll:

4ef2c0f85885855a0e759f14e3b80b6716b28748ea4df4d9c2150843fecfba68

Apabila pengguna menatal ke bahagian bawah, arahan mencetuskan fungsi loadMoreData untuk memuatkan lebih banyak data.

3.3. Lumpuhkan menu klik kanan

Dalam sesetengah senario, anda mungkin perlu melumpuhkan menu klik kanan, seperti untuk menghalang pengguna daripada menyalin data sensitif pada halaman. Kami boleh menyelesaikan masalah ini melalui arahan tersuai. Berikut ialah contoh arahan untuk melumpuhkan menu klik kanan:

Vue.directive('disable-right-click', {

bind: function(el) {

el.addEventListener('contextmenu', function(event) {
  event.preventDefault()
})

}
})

Dalam HTML, anda boleh melumpuhkan menu klik kanan melalui arahan v-disable-right-click:

695ae7be08f1594eaad141d0dafac207kandungan

Kesimpulan

4. Arahan tersuai ialah ciri Vue yang sangat berkuasa Ia boleh digunakan untuk merangkum dan menggunakan semula logik operasi DOM, dan boleh digunakan antara berbilang komponen untuk dikongsi. Dalam artikel ini, kami mempelajari cara membuat dan menggunakan arahan tersuai dalam Vue. Jika anda ingin mengetahui lebih lanjut tentang arahan dan komponen Vue, sila rujuk dokumentasi rasmi Vue.

Atas ialah kandungan terperinci Cara menggunakan arahan tersuai untuk melaksanakan operasi DOM dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!