Arahan tersuai
Daftar Kandungan
- Fungsi singkatan
- Objek tersurat
Pengenalan
v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：
当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus>
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update
🎜🎜🎜🎜🎜🎜🎜 sebagai tambahan kepada kod-kod lalai dan arahan dalam<v-show< /code>), Vue juga membenarkan pendaftaran arahan tersuai. Ambil perhatian bahawa dalam Vue2.0, bentuk utama penggunaan semula dan pengabstrakan kod ialah komponen. Walau bagaimanapun, dalam beberapa kes, anda masih perlu melakukan operasi peringkat rendah pada elemen DOM biasa, dalam hal ini arahan tersuai digunakan. Ambil contoh memfokus pada kotak input seperti berikut: 🎜🎜🎜: Dipanggil sekali sahaja, apabila arahan terikat pada elemen untuk kali pertama. Tetapan permulaan sekali boleh dilakukan di sini. 🎜🎜🎜🎜autofokustidak berfungsi pada Safari mudah alih). Sebenarnya, selagi anda belum mengklik apa-apa selepas membuka halaman ini, kotak input masih harus difokuskan. Sekarang mari kita gunakan arahan untuk mencapai fungsi ini: 🎜<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>🎜 Jika anda ingin mendaftar arahan tempatan, komponen itu juga menerima pilihanarahan: 🎜Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#hook-arguments-example', data: { message: 'hello!' } })🎜 Kemudian anda boleh menggunakan yang baharu pada mana-mana elemen dalam atribut templatv-focus, seperti berikut: 🎜<div id="baseexample"> <p>Scroll down the page</p> <p v-pin="200">Stick me 200px from the top of the page</p> </div>🎜🎜🎜🎜🎜Fungsi cangkuk🎜🎜🎜🎜🎜 Objek definisi arahan boleh menyediakan fungsi cangkuk berikut ( Semua adalah pilihan): 🎜🎜🎜🎜🎜
bind dimasukkan: Dipanggil apabila elemen terikat dimasukkan ke dalam nod induk (hanya nod induk dijamin wujud, tetapi tidak semestinya dimasukkan ke dalam dokumen). 🎜🎜🎜🎜 kemas kini: Dipanggil apabila VNode komponen dikemas kini, 🎜tetapi ia mungkin berlaku sebelum VNode anaknya dikemas kini🎜. Nilai arahan itu mungkin telah berubah atau mungkin tidak. Tetapi anda boleh mengabaikan kemas kini templat yang tidak perlu dengan membandingkan nilai sebelum dan selepas kemas kini (lihat di bawah untuk parameter fungsi cangkuk terperinci). 🎜🎜🎜🎜🎜Kami akan memperkenalkan lebih banyak butiran VNodes 🎜kemudian🎜 apabila kita membincangkan 🎜fungsi rendering🎜. 🎜
componentUpdated: Dipanggil selepas semua VNode componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。binding：一个对象，包含以下属性：name：指令名，不包括 v- 前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了
el之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的datasetdan sub-VNode komponennya di mana arahan terletak telah dikemas kini.
unbind: Dipanggil sekali sahaja, apabila arahan tidak terikat daripada elemen.
Seterusnya mari kita lihat pada parameter fungsi cangkuk (iaitu el, binding, vnode dan < code>oldVnode). 
Parameter fungsi cangkuk
Fungsi cangkuk arahan akan dihantar dalam seperti berikut Parameter:
el: Elemen yang terikat pada arahan boleh digunakan untuk mengendalikan DOM secara langsung. 🎜🎜🎜- 🎜🎜
v-my-directive="1 + 1", nilai mengikat ialah oldValue: Nilai pengikatan arahan sebelumnya, hanya tersedia dalam cangkuk kemas kini dan componentUpdated. Tersedia tanpa mengira sama ada nilai telah berubah. 🎜🎜🎜v-my-directive="1 + 1", ungkapannya ialah "1 + 1". 🎜🎜🎜arg: Parameter dihantar ke arahan, pilihan. Contohnya, dalam v-my-directive:foo, parameternya ialah "foo". 🎜🎜🎜v-my-directive.foo.bar, objek pengubah suai ialah { foo: true, bar: true }. 🎜oldVnode: Nod maya sebelumnya, hanya tersedia dalam cangkuk kemas kini dan componentUpdated. 🎜🎜Kecualiel, semua parameter lain hendaklah dibaca sahaja dan tidak boleh diubah suai. Jika anda perlu berkongsi data antara cangkuk, disyorkan untuk lulusset data🎜 untuk meneruskan. 🎜🎜🎜Berikut ialah contoh cangkuk tersuai yang menggunakan sifat ini: 🎜Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed' el.style.top = binding.value + 'px' } }) new Vue({ el: '#baseexample' })<div id="dynamicexample"> <h3>Scroll down inside this section ↓</h3> <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p> </div>🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜Parameter arahan dinamik🎜🎜🎜Parameter arahan boleh menjadi dinamik. Contohnya, dalam
v-mydirective:[argument]="value", parameterargumentboleh dikemas kini berdasarkan data contoh komponen! Ini membolehkan arahan tersuai digunakan secara fleksibel dalam aplikasi.v-mydirective:[argument]="value"中，argument参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：
Vue.directive('pin', { bind: function (el, binding, vnode) { el.style.position = 'fixed' var s = (binding.arg == 'left' ? 'left' : 'top') el.style[s] = binding.value + 'px' } }) new Vue({ el: '#dynamicexample', data: function () { return { direction: 'left' } } })Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value })这会把该元素固定在距离页面顶部 200 像素的位置。但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demo', function (el, binding) { console.log(binding.value.color) // => "white" console.log(binding.value.text) // => "hello!" })结果：
这样这个自定义指令现在的灵活性就足以支持一些不同的用例了。
函数简写
在很多时候，你可能想在
Sebagai contoh, anda ingin membuat arahan tersuai untuk membetulkan elemen pada halaman melalui reka letak tetap. Kami boleh membuat arahan tersuai yang mengemas kini nilai piksel kedudukan menegak dengan nilai arahan seperti ini:bind和updaterrreeerrreee
rrreeerrreee
Ini akan membetulkan elemen pada kedudukan 200 piksel dari bahagian atas halaman. Tetapi bagaimana jika senarionya ialah kita perlu membetulkan elemen di sebelah kiri dan bukannya bahagian atas? Pada masa ini, parameter dinamik boleh digunakan untuk mengemas kini setiap contoh komponen dengan sangat mudah.Keputusan:
Dengan cara ini arahan tersuai ini kini cukup fleksibel untuk menyokong beberapa kes penggunaan yang berbeza.
Singkatan fungsi
🎜Dalam banyak kes, anda mungkin mahu mencetuskan apabilamengikatdankemas kiniTingkah laku yang sama tanpa mengira cangkuk lain. Contohnya, tulis seperti ini:🎜rrreee🎜🎜🎜🎜🎜🎜Objek literal🎜🎜🎜🎜🎜Jika arahan memerlukan berbilang nilai, anda boleh menghantar objek JavaScript secara literal. Ingat, fungsi arahan menerima semua ungkapan JavaScript undang-undang. 🎜🎜rrreeerrreee🎜🎜🎜🎜 🎜
