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:

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', {

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

Kemudian dalam HTML anda boleh menggunakan arahan tersuai melalui:

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', {

el.focus()

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

3.2 >

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:

bind: function(el) {

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

}
})

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