使用v-for綁定列表時，有時候需要綁定如select2之類的jQuery插件。

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

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

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

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

鉤子函數(shù)

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

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

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

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

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

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

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

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

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

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

binding: 一個對象，包含以下屬性：

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

oldVnode: 上一個虛擬節(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);  }});

詳情參見Vue官方文檔自定義指令