使用v-for綁定列表時(shí)，有時(shí)候需要綁定如select2之類(lèi)的jQuery插件。

需要在Vue根據(jù)數(shù)組內(nèi)容生成dom元素之后，去找到該dom元素，然后 $().xxx綁定jQuery插件。

之前使用Vue.nextTick方法，在一次dom更新以后執(zhí)行延遲回調(diào)，渲染jQuery插件。

然而這并不是一種很好的方式，有時(shí)候難以確定dom元素更新是否是我們需要關(guān)注的那個(gè)。 

在列表中渲染Jquery插件的正確姿勢(shì)，是使用自定義指令。自定義指令提供了一些鉤子函數(shù)，可以準(zhǔn)確的監(jiān)聽(tīng)到dom元素與數(shù)據(jù)的綁定周期。

鉤子函數(shù)

指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)（可選）：

bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。

inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。

update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過(guò)比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下）。

componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。

unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。

接下來(lái)我們來(lái)看一下鉤子函數(shù)的參數(shù) (包括 el，binding，vnode，oldVnode) 。

鉤子函數(shù)參數(shù)

鉤子函數(shù)被賦予了以下參數(shù)：

el: 指令所綁定的元素，可以用來(lái)直接操作 DOM 。

binding: 一個(gè)對(duì)象，包含以下屬性：

• name: 指令名，不包括 v- 前綴。
• value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
• oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用。
• expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
• arg: 傳給指令的參數(shù)。例如 v-my-directive:foo， arg 的值是 "foo"。
• modifiers: 一個(gè)包含修飾符的對(duì)象。 例如： v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是 { foo: true, bar: true }。
  

vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)，查閱 VNode API 了解更多詳情。

oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。 

例子

<table id="testTable">
  <tr v-for="(el, lineIndex) in lines" v-line-inserted="lineIndex" >
   <td>
    <input name="bindSelect2" />
   <td>
  </tr>
</table>

function renderLines(el, lineIndex){
  //渲染select2
  $("testTable tr").eq(lineIndex).select2({...});
}

Vue.directive('line-inserted', {
  inserted: function (el, binding) {
   var lineIndex = binding.value;
   renderLines(el, lineIndex);
  }
});

詳情參見(jiàn)Vue官方文檔自定義指令

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論