Rumah hujung hadapan web Soal Jawab bahagian hadapan Bilakah saya boleh menggunakan arahan tersuai dalam Vue?

Bilakah saya boleh menggunakan arahan tersuai dalam Vue?

Dec 24, 2021 pm 05:15 PM
vue Arahan tersuai

Logik menggunakan arahan tersuai adalah sama seperti logik menggunakan pengubah peristiwa Apabila terdapat logik yang berkaitan dengan pengendalian DOM/BOM dalam kaedah, ia perlu disarikan ke dalam arahan tersuai untuk memudahkan logik Perniagaan. diasingkan daripada operasi DOM yang berkaitan dan menjadikannya lebih mudah untuk ujian unit.

Bilakah saya boleh menggunakan arahan tersuai dalam Vue?

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

1. Cara membuat arahan tersuai

Buat arahan secara global melalui Vue.directive, parameter pertama Vue. arahan Nama arahan ditakrifkan Kod berikut mencipta arahan bernama ubah saiz.

Vue.directive("resize", {

});
Salin selepas log masuk

Selepas mendaftarkan arahan ini secara global, ini bermakna arahan ini boleh digunakan dalam mana-mana komponen Anda boleh menggunakan arahan secara langsung dalam templat komponen satu fail, atau dalam JSX Gunakan arahan. Mengikut konvensyen, nama arahan diawali dengan "v-", yang digunakan untuk menunjukkan bahawa ia adalah awalan.

Bilakah saya boleh menggunakan arahan tersuai dalam Vue?

2 Bila hendak menggunakan arahan tersuai

Mengenai masa untuk menggunakan arahan tersuai, logiknya adalah sama seperti menggunakan pengubahsuai acara.

Penggunaan pengubah suai acara sebahagian besarnya untuk menjadikan kod kami dipacu data dan mudah untuk diuji Logik DOM diwakilkan secara berasingan dan dipersetujui kepada beberapa pengubahsuai tertentu. (Nota berkaitan pengubah suai acara: https://www.cnblogs.com/xiaoxuStudy/p/13233379.html#oneone)

Malah, logik yang sama digunakan pada arahan tersuai. Apabila terdapat logik yang berkaitan dengan pengendalian DOM/BOM dalam kaedah kami, kami harus mempertimbangkan sama ada ia boleh disarikan ke dalam arahan tersuai untuk memisahkan logik perniagaan daripada operasi DOM yang berkaitan dan menjadikannya lebih mudah untuk diuji unit.

3 Fungsi cangkuk

Vue mengikut corak reka bentuk di sini Pembukaan dan prinsip penutup membolehkan pembangun mengendalikan komponen pada masa yang berbeza melalui fungsi cangkuk yang dipersetujui. (Fungsi cangkuk laman web rasmi Vue berkaitan: https://cn.vuejs.org/v2/guide/custom-directive.html#fungsi Cangkuk)

1

Vue.directive("resize", {
  //只调用一次,指令第一次绑定元素时调用
  //在这里可以进行一次性的初始化设置
  bind: function(el, binding, value){},
  //被绑定元素插入父节点时调用
  //(仅保证父节点存在,但不一定已被插入文档中)
  inserted: function(el, binding, vnode){},
  //所在组件的 Vnode 更新时调用
  //但是可能发生在其子 VNode 更新之前
  //指令的值可能发生了变化,也可能没有
  //但是可以通过比较更新前后的值来忽略不必要的模板更新
  update: function(el, binding, vnode, oldVnode){},
  //指令所在的 VNode 及其子 VNode 全部更新后调用
  componentUpdated: function(el, binding, vnode, oldVnode){},
  //只调用一次,指令与元素解绑时调用
  unbind: function(el, binding, vnode){},
});
Salin selepas log masuk

Contoh fungsi cangkuk

Mari kita lihat pada pasangan pertama fungsi cangkuk, fungsi mengikat dan melepaskan Sebagai nama mencadangkan, kedua-dua ini Fungsi cangkuk dipanggil apabila elemen yang diisytiharkan oleh arahan semasa terikat dan tidak terikat, dan harus diingat bahawa kedua-dua mengikat dan melepaskan hanya akan dipanggil sekali .

Bilakah saya boleh menggunakan arahan tersuai dalam Vue?

Seterusnya mari kita lihat fungsi cangkuk yang dimasukkan. Biasanya, dimasukkan dipanggil selepas mengikat.

Perbezaan antara bind dan inserted ialah: parameter el.parentNode in bind adalah batal, dan dalam inserted, nod induk nod semasa boleh diakses melalui el.parentNode. Apabila terdapat maklumat yang perlu disimpan pada nod induk dan nod induk perlu diakses, inserted digunakan dengan lebih kerap daripada bind .

Bilakah saya boleh menggunakan arahan tersuai dalam Vue?

Seterusnya mari kita lihat set terakhir kemas kini fungsi cangkuk dan Kemas Kini komponen pasangan fungsi cangkuk ini akan dipanggil sebelum ini dan selepas vnode dikemas kini.

Berbanding dengan fungsi cangkuk lain, kemas kini dan pas komponenKemas kini dalam satu lagi parameter, oldVnode oldVnode mewakili maklumat nod DOM Maya sebelumnya, dan vnod mewakili maklumat nod DOM Maya semasa. Anda boleh menentukan sama ada templat perlu dikemas kini dengan membandingkan perbezaan antara oldVnode dan vnode untuk mengurangkan kemas kini templat yang tidak diperlukan dan dengan itu meningkatkan prestasi komponen ke tahap tertentu.

Bilakah saya boleh menggunakan arahan tersuai dalam Vue?

2. 钩子函数参数

function(
  // 指令所绑定的元素,可以用来直接操作 DOM
  el,
  // binding 一个对象,包含以下属性
  {
    // 指令名,不包括 -v 前缀
    name,
    // 指令的绑定值,例如:v-my-directive="1+1"中,绑定值为 2
    value,
    // 指令绑定的前一个值
    // 仅在 update 和 componentUpdated 钩子中可用
    oldValue,
    //字符串形式的指令表达式
    //例如 v-my-directive="1+1" 中,表达式为 "1+1"
    expression,
    //例如指令的参数,可选。
    //例如 v-my-directive:foo 中,参数为 "foo"
    arg,
    //一个包含修饰符的对象
    //例如:v-my-directive.foo.bar 中,
    //修饰符对象为 {foo: true, bar: true}
    modifiers
  },
  //Vue 编译生成的虚拟节点
  vnode,
  //上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用
  oldVnode
)
Salin selepas log masuk

钩子函数参数

  除了 el 之后,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

Bilakah saya boleh menggunakan arahan tersuai dalam Vue?

【相关推荐:《vue.js教程》】

Atas ialah kandungan terperinci Bilakah saya boleh menggunakan arahan tersuai dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan echarts dalam vue Cara menggunakan echarts dalam vue May 09, 2024 pm 04:24 PM

Menggunakan ECharts dalam Vue memudahkan untuk menambahkan keupayaan visualisasi data pada aplikasi anda. Langkah khusus termasuk: memasang pakej ECharts dan Vue ECharts, memperkenalkan ECharts, mencipta komponen carta, mengkonfigurasi pilihan, menggunakan komponen carta, menjadikan carta responsif kepada data Vue, menambah ciri interaktif dan menggunakan penggunaan lanjutan.

Peranan lalai eksport dalam vue Peranan lalai eksport dalam vue May 09, 2024 pm 06:48 PM

Soalan: Apakah peranan lalai eksport dalam Vue? Penerangan terperinci: eksport lalai mentakrifkan eksport lalai komponen. Apabila mengimport, komponen diimport secara automatik. Permudahkan proses import, tingkatkan kejelasan dan cegah konflik. Biasa digunakan untuk mengeksport komponen individu, menggunakan kedua-dua eksport bernama dan lalai, dan mendaftarkan komponen global.

Cara menggunakan fungsi peta dalam vue Cara menggunakan fungsi peta dalam vue May 09, 2024 pm 06:54 PM

Fungsi peta Vue.js ialah fungsi tertib tinggi terbina dalam yang mencipta tatasusunan baharu di mana setiap elemen ialah hasil yang diubah bagi setiap elemen dalam tatasusunan asal. Sintaks ialah map(callbackFn), di mana callbackFn menerima setiap elemen dalam tatasusunan sebagai argumen pertama, secara pilihan indeks sebagai argumen kedua, dan mengembalikan nilai. Fungsi peta tidak mengubah tatasusunan asal.

Perbezaan antara acara dan $event dalam vue Perbezaan antara acara dan $event dalam vue May 08, 2024 pm 04:42 PM

Dalam Vue.js, acara ialah peristiwa JavaScript asli yang dicetuskan oleh penyemak imbas, manakala $event ialah objek peristiwa abstrak khusus Vue yang digunakan dalam komponen Vue. Secara amnya lebih mudah untuk menggunakan $event kerana ia diformat dan dipertingkatkan untuk menyokong pengikatan data. Gunakan acara apabila anda perlu mengakses kefungsian khusus objek acara asli.

Peranan onmounted dalam vue Peranan onmounted dalam vue May 09, 2024 pm 02:51 PM

onMounted ialah cangkuk kitaran hayat pemasangan komponen dalam Vue Fungsinya adalah untuk melaksanakan operasi pemulaan selepas komponen dipasang pada DOM, seperti mendapatkan rujukan kepada elemen DOM, menetapkan data, menghantar permintaan HTTP, mendaftarkan pendengar acara, dsb. Ia hanya dipanggil sekali apabila komponen dipasang Jika anda perlu melakukan operasi selepas komponen dikemas kini atau sebelum ia dimusnahkan, anda boleh menggunakan cangkuk kitar hayat yang lain.

Perbezaan antara eksport dan eksport lalai dalam vue Perbezaan antara eksport dan eksport lalai dalam vue May 08, 2024 pm 05:27 PM

Terdapat dua cara untuk mengeksport modul dalam Vue.js: eksport dan eksport lalai. eksport digunakan untuk mengeksport entiti bernama dan memerlukan penggunaan pendakap kerinting lalai eksport digunakan untuk mengeksport entiti lalai dan tidak memerlukan pendakap kerinting. Apabila mengimport, entiti yang dieksport melalui eksport perlu menggunakan nama mereka, manakala entiti yang dieksport secara lalai eksport boleh digunakan secara tersirat. Adalah disyorkan untuk menggunakan lalai eksport untuk modul yang perlu diimport beberapa kali dan menggunakan eksport untuk modul yang hanya dieksport sekali.

Apakah cangkuk dalam vue Apakah cangkuk dalam vue May 09, 2024 pm 06:33 PM

Cangkuk Vue ialah fungsi panggil balik yang melakukan tindakan pada peristiwa tertentu atau peringkat kitaran hayat. Ia termasuk cangkuk kitaran hayat (seperti beforeCreate, mounted, beforeDestroy), cangkuk pengendalian acara (seperti klik, input, keydown) dan cangkuk tersuai. Cangkuk meningkatkan kawalan komponen, bertindak balas kepada kitaran hayat komponen, mengendalikan interaksi pengguna dan meningkatkan kebolehgunaan semula komponen. Untuk menggunakan cangkuk, hanya tentukan fungsi cangkuk, laksanakan logik dan kembalikan nilai pilihan.

Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue? Apakah senario yang boleh digunakan untuk pengubah suai peristiwa dalam vue? May 09, 2024 pm 02:33 PM

Pengubah suai acara Vue.js digunakan untuk menambah gelagat tertentu, termasuk: menghalang gelagat lalai (.prevent) menghentikan acara menggelegak (.stop) acara sekali (.sekali) menangkap acara (.capture) mendengar acara pasif (.pasif) Suai pengubah suai (.self)Pengubah suai kunci (.key)

See all articles