Vue.js列表渲染綁定jQuery插件的示例分析

這篇文章給大家分享的是有關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).select2({...});
}

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

感謝各位的閱讀！關于“Vue.js列表渲染綁定jQuery插件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！