Cara membuat arahan tersuai dalam vue

Gunakan kaedah Vue.directive() untuk mencipta arahan tersuai dalam Vue Nama arahan bermula dengan awalan v-Pilihan arahan termasuk cangkuk kitaran hayat seperti mengikat, memasukkan, mengemas kini, komponenDikemas kini, menyahikat, dsb. digunakan untuk mengendalikan elemen DOM pada peringkat yang berbeza . Parameter boleh diterima Tambah titik bertindih (: nama parameter) selepas nama arahan untuk menentukan parameter.

Buat arahan tersuai dalam Vue

Buat arahan tersuai dalam Vue melalui kaedah Vue.directive(). Kaedah ini menerima dua parameter: nama arahan dan objek yang mengandungi pilihan arahan. Vue.directive() 方法创建自定义指令。该方法接受两个参数：指令名称和一个包含指令选项的对象。

指令名称

指令名称必须以 v- 前缀开头，后跟一个驼峰式名称来标识指令。例如，v-myDirective。

指令选项

指令选项对象可以包含以下属性：

• bind (可选) 在元素插入 DOM 时调用一次。
• inserted (可选) 在元素被插入 DOM 后立即调用。
• update (可选) 在元素更新时调用。
• componentUpdated (可选) 在父组件更新后调用。
• unbind (可选) 在元素从 DOM 中移除时调用。

示例

例如，创建一个名为 v-highlight 的自定义指令，它会在元素上添加一个黄色背景：

<code class="javascript">Vue.directive('highlight', {
  bind: function (el, binding, vnode) {
    el.style.backgroundColor = 'yellow';
  }
});</code>

然后，可以在模板中使用此指令：

<code class="html"><div v-highlight>突出显示此文本</div></code>

带参数的指令

指令也可以接受参数。要实现这一点，可以在指令名称后添加冒号 (: 参数名称)。例如，创建一个名为 v-size

Nama Perintah

🎜🎜Nama arahan mesti bermula dengan awalan v, diikuti dengan nama camelCase untuk mengenal pasti arahan. Contohnya, v-myDirective. 🎜🎜🎜Pilihan arahan🎜🎜🎜Objek pilihan arahan boleh mengandungi atribut berikut: 🎜

• 🎜ikat (pilihan)🎜 Dipanggil sekali apabila elemen dimasukkan ke dalam DOM.
• 🎜dimasukkan (pilihan)🎜 Dipanggil serta-merta selepas elemen dimasukkan ke dalam DOM.
• 🎜kemas kini (pilihan)🎜 Dipanggil apabila elemen dikemas kini.
• 🎜componentUpdated (pilihan)🎜 Dipanggil selepas komponen induk dikemas kini.
• 🎜buka ikatan (pilihan)🎜 Dipanggil apabila elemen dialih keluar daripada DOM.

🎜🎜Contoh🎜🎜🎜Sebagai contoh, buat arahan tersuai yang dipanggil v-highlight yang menambahkan latar belakang kuning pada elemen: 🎜

<code class="javascript">Vue.directive('size', {
  bind: function (el, binding, vnode) {
    el.style.fontSize = binding.value + 'px';
  }
});</code>

🎜Kemudian, Anda boleh menggunakan ini arahan dalam templat: 🎜

<code class="html"><div v-size="20">设置字体大小为 20px</div></code>

🎜🎜Arahan dengan parameter🎜🎜🎜Arahan juga boleh menerima parameter. Untuk melakukan ini, tambahkan titik bertindih (: nama parameter) selepas nama arahan. Sebagai contoh, buat arahan tersuai yang dipanggil v-size yang menetapkan saiz fon elemen kepada parameter: 🎜rrreee🎜 Anda kemudian boleh menggunakan arahan ini dalam templat dan lulus parameter: 🎜rrreee

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