Vue.js列表渲染綁定jQuery插件的正確姿勢
使用v-for綁定列表時，有時候需要綁定如select2之類的jQuery插件。
需要在Vue根據數組內容生成dom元素之後，去找到該dom元素，然後 $().xxx綁定jQuery插件。
之前使用Vue.nextTick方法，在壹次dom更新以後執行延遲回調，渲染jQuery插件。
然而這並不是壹種很好的方式，有時候難以確定dom元素更新是否是我們需要關註的那個。
在列表中渲染Jquery插件的正確姿勢，是使用自定義指令。自定義指令提供了壹些鉤子函數，可以準確的監聽到dom元素與數據的綁定周期。
鉤子函數
指令定義函數提供了幾個鉤子函數（可選）：
bind: 只調用壹次，指令第壹次綁定到元素時調用，用這個鉤子函數可以定義壹個在綁定時執行壹次的初始化動作。
inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。
update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。
componentUpdated: 被綁定元素所在模板完成壹次更新周期時調用。
unbind: 只調用壹次， 指令與元素解綁時調用。
接下來我們來看壹下鉤子函數的參數 (包括?el，binding，vnode，oldVnode) 。
鉤子函數參數
鉤子函數被賦予了以下參數：
el: 指令所綁定的元素，可以用來直接操作 DOM 。
binding: 壹個對象，包含以下屬性：
name: 指令名，不包括?v-?前綴。
value: 指令的綁定值， 例如：?v-my-directive="1 + 1", value 的值是?2。
oldValue: 指令綁定的前壹個值，僅在?update?和?componentUpdated?鉤子中可用。無論值是否改變都可用。
expression: 綁定值的字符串形式。 例如?v-my-directive="1 + 1"?， expression 的值是?"1 + 1"。
arg: 傳給指令的參數。例如?v-my-directive:foo， arg 的值是?"foo"。
modifiers: 壹個包含修飾符的對象。 例如：?v-my-directive.foo.bar, 修飾符對象 modifiers 的值是?{ foo: true, bar: true }。
vnode: Vue 編譯生成的虛擬節點，查閱?VNode API?了解更多詳情。
oldVnode: 上壹個虛擬節點，僅在?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).find("input[name='bindSelect2']").select2({...});
}
Vue.directive('line-inserted', {
?inserted: function (el, binding) { ?var lineIndex = binding.value;
?renderLines(el, lineIndex);
?}
});