Basis
Selain arahan bawaan, Vue.js juga memungkinkan pendaftaran arahan khusus. Arahan khusus menyediakan mekanisme untuk memetakan perubahan data menjadi perilaku DOM.
Petunjuk Kustom Global dapat didaftarkan menggunakan metode VUE.Directive (ID, Definition), yang menerima dua ID instruksi parameter dan objek definisi. Anda juga dapat mendaftarkan Petunjuk Kustom Lokal menggunakan opsi Arahan Komponen.
Fungsi kait
Mendefinisikan objek dapat memberikan beberapa fungsi kait (semua opsional):
• Bind: Dipanggil hanya sekali, dan dipanggil ketika instruksi terikat pada elemen untuk pertama kalinya.
• Pembaruan: Panggilan pertama dipanggil segera setelah mengikat dengan nilai awal sebagai parameter, dan kemudian setiap kali nilai terikat berubah, parameter adalah nilai baru dan nilai lama.
• Unbind: Dipanggil hanya sekali, ketika instruksi tidak terhubung dari elemen.
Contoh
Vue.directive ('My-Directive', {bind: function () {// Persiapan pekerjaan // misalnya, menambahkan event handler atau tugas yang memikat tinggi yang hanya perlu dijalankan sekali}, perbarui: function (newValue, oldValue) {// berfungsi saat nilai diperbarui // Ini juga akan disebut dengan nilai awal,/ paramer) {paramete {Nilai {Nilai {newAnde {/ {newAndy {/ {newAnpen { Contoh, hapus pendengar acara yang ditambahkan oleh bind ()}})Setelah mendaftar, Anda dapat menggunakannya seperti ini di template vue.js (ingat untuk menambahkan awalan v-):
<Div V-My-Directive = "SomeValue"> </Div>
Ketika hanya fungsi pembaruan yang diperlukan, Anda dapat lulus dalam suatu fungsi alih -alih objek definisi:
Vue.directive ('My-Directive', Function (value) {// Fungsi ini digunakan sebagai pembaruan ()})Properti instance arahan
Semua fungsi kait akan disalin ke objek arahan yang sebenarnya, dan ini di dalam kait menunjuk ke objek arahan ini. Objek ini memperlihatkan beberapa properti yang berguna:
• EL: Elemen yang terikat ke arahan.
• VM: Konteks viewmodel yang memiliki instruksi.
• Ekspresi: Ekspresi arahan, tidak termasuk parameter dan filter.
• ARG: Parameter Petunjuk.
• Nama: Nama Petunjuk, tanpa awalan.
• Pengubah: Suatu objek yang berisi pengubah untuk arahan.
• Descriptor: Suatu objek yang berisi hasil parsing dari arahan.
Anda harus memperlakukan properti ini sebagai baca saja dan tidak memodifikasinya. Anda juga dapat menambahkan properti khusus ke objek Petunjuk, tetapi berhati -hatilah untuk tidak menimpa properti internal yang ada.
Contoh:
<div id = "demo" v-demo: hello.ab = "msg"> </div>
Vue.directive('demo', { bind: function () { console.log('demo bound!') }, update: function (value) { this.el.innerHTML = 'name - ' + this.name + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'modifiers - ' + Json.stringify (this.modifiers) + '<br>' + 'value -' + value}}) var demo = new vue ({el: '#demo', data: {msg: 'hello!'}}))Objek literal
Jika Petunjuk membutuhkan banyak nilai, Anda dapat meneruskan objek JavaScript secara literal. Ingat bahwa arahan dapat menggunakan ekspresi javascript hukum apa pun:
<div v-demo = "{color: 'white', teks: 'halo!' } "> </div>
Vue.directive ('demo', function (value) {console.log (value.color) // "white" console.log (value.text) // "halo!"})Pengubah literal
Ketika Petunjuk menggunakan pengubah literal, nilainya akan diproses sebagai string normal dan diteruskan ke metode pembaruan. Metode pembaruan hanya akan dipanggil sekali, karena string normal tidak dapat menanggapi perubahan data.
<Div v-demo.literal = "foo bar baz">
Vue.directive ('demo', function (value) {console.log (value) // "foo bar baz"})Arahan Elemental
Terkadang kami ingin menggunakan arahan dalam bentuk elemen khusus, bukan dalam bentuk fitur. Ini sangat mirip dengan arahan "E" Angular. Instruksi elemen dapat dianggap sebagai komponen yang ringan. Anda dapat mendaftarkan arahan elemen khusus seperti berikut:
Vue.elementDirective ('my-directive', {// api bind: function () {// operasi this.el ...}})Jangan menulis seperti ini:
<Div V-My-Directive> </div>
Tulis dengan cara ini:
<My-Directive> </yrective>
Instruksi elemen tidak dapat menerima parameter atau ekspresi, tetapi dapat membaca karakteristik elemen untuk menentukan perilakunya.
Tidak seperti instruksi biasa, instruksi elemen bersifat final, yang berarti bahwa begitu Vue bertemu dengan instruksi elemen, ia akan melewatkan elemen dan elemen anaknya - hanya instruksi elemen itu sendiri yang dapat beroperasi pada elemen dan elemen anaknya.
Opsi lanjutan
params
Arahan khusus dapat menerima array params, menentukan daftar fitur, dan kompiler Vue akan secara otomatis mengekstrak fitur -fitur ini dari elemen terikat. Misalnya:
<Div V-Contoh A = "Hai"> </Div>
Vue.directive ('example', {params: ['a'], bind: function () {console.log (this.params.a) // -> "hai"}})API ini juga mendukung sifat dinamis. this.params [kunci] akan diperbarui secara otomatis. Selain itu, panggilan balik dapat ditentukan untuk dihubungi saat nilainya berubah:
<Div V-Contoh V-Bind: A = "SomeValue"> </Div>
Vue.directive ('example', {params: ['a'], paramwatchers: {a: function (val, oldval) {console.log ('a ganti!')}}}))Mirip dengan alat peraga, nama parameter arahan menggunakan gaya Camelcase dalam JavaScript, dan gaya-kasus kebab sesuai dengan HTML. Sebagai contoh, misalkan ada parameter `disable-efek` di templat, akses di JavaScript dengan` disableeffect`.
dalam
Jika Petunjuk Kustom digunakan pada suatu objek dan pembaruan dipicu ketika sifat internal perubahan objek, tentukan dalam: Benar dalam objek Definisi Arahan.
<Div V-My-Directive = "Obj"> </div>
Vue.directive ('My-Directive', {Deep: True, Update: Function (obj) {// Dipanggil ketika properti bersarang `obj`}}))TwoWay
Jika Petunjuk ingin menulis kembali data ke instance VUE, tentukan Twoway: Benar di objek Definisi Directive. Opsi ini memungkinkan this.set (nilai) digunakan dalam arahan:
Vue.directive ('example', {twoway: true, bind: function () {this.handler = function () {// Tulis data kembali ke vm // jika arahan mengikat v-example = "abc" seperti ini // ini akan mengatur `vm.abc` dengan nilai ini.set (ini. this.handler)}, unbind: function () {this.el.removeEventListener ('input', this.handler)}}))menerima statement
Lewat penerimaan: true memungkinkan arahan khusus untuk menerima pernyataan inline, seperti v-on:
<Div V-My-Directive = "A ++"> </div>
Vue.directive ('My-Directive', {acceptatement: true, update: function (fn) {// Nilai yang masuk adalah fungsi // Pernyataan "a ++" akan dihitung dalam ruang lingkup instance milik ketika disebut}})Gunakan dengan bijak karena biasanya Anda ingin menghindari efek samping di templat Anda.
terminal
1.0.19+
Vue mengkompilasi modul dengan secara rekursif melintasi pohon DOM. Tetapi ketika menemukan arahan terminal, ia berhenti melintasi elemen keturunan elemen ini. Petunjuk ini akan mengambil alih tugas menyusun elemen ini dan keturunannya. V-IF dan V-FOR adalah arahan terminal.
Menulis Arahan Terminal Kustom adalah topik tingkat tinggi dan membutuhkan pemahaman yang lebih baik tentang proses kompilasi Vue, tetapi ini tidak berarti bahwa tidak mungkin untuk menulis arahan terminal khusus. Gunakan Terminal: Benar untuk menentukan Petunjuk Terminal Kustom, dan mungkin juga perlu menggunakan Vue.FragmentFactory untuk menyusun parsial. Berikut adalah Petunjuk Terminal Kustom yang mengkompilasi templat kontennya dan menyuntikkan hasilnya ke tempat lain pada halaman:
var FragmentFactory = Vue.FragmentFactoryvar remove = Vue.util.removevar createAnchor = Vue.util.createAnchorVue.directive('inject', { terminal: true, bind: function () { var container = document.getElementById(this.arg) this.anchor = createAnchor('v-inject') container.appendChild (this.anchor) hapus (this.el) var factory = new fragmentFactory (this.vm, this.el) this.frag = factory.create (this._host, this._scope, this._frag) this.frag.before (this.anchor)}, function: function () {n)<Div ID = "Modal"> </div> ... <Div V-Inject: Modal> <h1> header </h1> <p> Tubuh </p> <p> Footer </p> </div>
Jika Anda ingin menulis arahan terminal khusus, disarankan agar Anda membaca kode sumber arahan terminal bawaan, seperti V-IF dan V-For, sehingga dapat lebih memahami mekanisme internal Vue.
prioritas
Anda dapat memberikan prioritas pada instruksi. Jika tidak ditentukan, default untuk perintah normal adalah 1000, dan default untuk perintah terminal adalah 2000. Instruksi dengan prioritas yang lebih tinggi pada elemen yang sama akan diproses lebih awal dari instruksi lainnya. Arahan dengan prioritas yang sama diproses dalam urutan di mana mereka muncul dalam daftar properti elemen, tetapi tidak dapat dijamin bahwa pesanan ini konsisten di browser yang berbeda.
Prioritas arahan bawaan dapat dilihat di API. Selain itu, instruksi kontrol proses V-IF dan V-For selalu memiliki prioritas tertinggi selama proses kompilasi.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.