Cara membuat arahan dalam vue

Vue.js ialah rangka kerja JavaScript yang boleh dikembangkan yang menyediakan banyak ciri untuk membina aplikasi web interaktif. Salah satu ciri untuk menyesuaikan dan mengawal elemen DOM ialah arahan Vue. Artikel ini akan memperkenalkan cara membuat arahan dalam Vue.js.

Ikhtisar

Dalam Vue.js, arahan ialah atribut HTML dengan awalan khas. Contohnya, "v-" ialah awalan untuk arahan Vue. Nilai arahan boleh menjadi ungkapan JavaScript atau "parameter arahan", yang merupakan nilai yang dipisahkan bertindih selepas nama arahan. Arahan boleh menerima satu atau lebih parameter dan mempunyai cangkuk kitaran hayat.

Contoh berikut menunjukkan cara menggunakan arahan dalam Vue.js:

<div v-my-directive:foo.bar></div>

Di sini, "v-my-directive" ialah nama arahan, "foo" ialah parameter arahan, dan "bar" ialah pengubah suai arahan. Arahan juga boleh menerima ungkapan:

<div v-my-directive="{ arg1: 1, arg2: &#39;foo&#39; }"></div>

Mencipta Arahan

Untuk menggunakan arahan Vue, anda perlu mentakrifkan fungsi arahan terlebih dahulu. Fungsi arahan Vue boleh menerima empat parameter: el, binding, vnode dan oldVnode. Parameter ini ialah elemen DOM bagi elemen yang terikat dengan arahan, objek yang terikat dengan arahan, nod maya yang dijana oleh kompilasi Vue dan nod maya lama.

Fungsi arahan mempunyai beberapa fungsi cangkuk, yang serupa dengan fungsi cangkuk komponen Vue. Berikut ialah beberapa cangkuk arahan biasa:

• bind: Dipanggil sekali sahaja, apabila arahan itu pertama kali terikat pada elemen. Beberapa tetapan awal boleh dibuat di sini.
• dimasukkan: Dipanggil apabila elemen terikat dimasukkan ke dalam nod induk (hanya terpakai untuk nod elemen).
• kemas kini: Dipanggil apabila komponen dikemas kini, tetapi mungkin sebelum komponen anak dikemas kini.
• componentUpdated: Dipanggil selepas kemas kini komponen selesai.
• buka ikatan: Dipanggil sekali sahaja, apabila arahan tidak terikat daripada elemen.

Berikut ialah contoh mudah arahan tersuai:

Vue.directive('my-directive', {
  bind: function (el, binding) {
    el.innerHTML = binding.value.toUpperCase();
  }
});

Di sini, kami mentakrifkan arahan global Vue.directive menggunakan fungsi my-directive. Fungsi arahan ini mempunyai cangkuk bind yang menerima parameter el dan binding. Apabila arahan ini terikat pada elemen, el.innerHTML akan ditetapkan kepada versi huruf besar binding.value.

Gunakan arahan

Setelah arahan ditakrifkan, ia boleh digunakan sebagai atribut elemen HTML. Contoh berikut menunjukkan penggunaan arahan my-directive:

<div v-my-directive="message"></div>

Di sini message ialah atribut data yang ditakrifkan dalam tika Vue. Apabila arahan terikat pada elemen, nilai message dihantar ke parameter binding.value fungsi arahan dan diproses.

Anda juga boleh menggunakan titik bertindih untuk menentukan pengubah suai arahan:

<div v-my-directive.some-modifier="message"></div>

Dalam fungsi arahan, anda boleh menggunakan binding.modifiers untuk mengakses pengubah suai arahan. Dalam contoh ini, jika nama arahan ialah my-directive dan mempunyai some-modifier pengubah suai, maka binding.modifiers akan mengembalikan nilai {someModifier: true}.

Alih keluar arahan

Kadangkala perlu menambah atau mengalih keluar arahan secara dinamik. Vue.js menyediakan singkatan v-bind untuk arahan :. Oleh itu, arahan boleh dialih keluar dengan menetapkan sifat kepada null:

<div v-bind:my-directive="condition ? message : null"></div>

Dalam contoh ini, arahan terikat kepada elemen jika syarat condition dipenuhi, dan tidak terikat daripada elemen sebaliknya.

Kesimpulan

Artikel ini memperkenalkan penciptaan dan penggunaan arahan dalam Vue.js, yang boleh mengawal elemen DOM dan logik berinteraksi dengannya. Kini anda boleh menyesuaikan arahan anda dan meningkatkan aplikasi Vue.js anda.

Atas ialah kandungan terperinci Cara membuat arahan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!