


Bilakah saya boleh menggunakan arahan tersuai dalam Vue?
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.
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", { });
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.
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){}, });
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 .
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 .
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.
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 )
钩子函数参数
除了 el 之后,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。
【相关推荐:《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!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

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.

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.

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.

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.

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.

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.

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.

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)
