Vue.js列表渲染綁定jQuery插件的正確姿勢
使用v-for綁定列表時,有時候需要綁定如select2之類的jQuery插件。
需要在Vue根據數組內容生成dom元素之后,去找到該dom元素,然后 $().xxx綁定jQuery插件。
之前使用Vue.nextTick方法,在一次dom更新以后執(zhí)行延遲回調,渲染jQuery插件。
然而這并不是一種很好的方式,有時候難以確定dom元素更新是否是我們需要關注的那個。
在列表中渲染Jquery插件的正確姿勢,是使用自定義指令。自定義指令提供了一些鉤子函數,可以準確的監(jiān)聽到dom元素與數據的綁定周期。
鉤子函數
指令定義函數提供了幾個鉤子函數(可選):
bind: 只調用一次,指令第一次綁定到元素時調用,用這個鉤子函數可以定義一個在綁定時執(zhí)行一次的初始化動作。
inserted: 被綁定元素插入父節(jié)點時調用(父節(jié)點存在即可調用,不必存在于 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 編譯生成的虛擬節(jié)點,查閱 VNode API 了解更多詳情。
oldVnode: 上一個虛擬節(jié)點,僅在 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官方文檔自定義指令
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Element-UI Table組件上添加列拖拽效果實現方法
這篇文章主要為大家詳細介紹了Element-UI Table組件上添加列拖拽效果的實現方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-04-04客戶端(vue框架)與服務器(koa框架)通信及服務器跨域配置詳解
本篇文章主要介紹了客戶端(vue框架)與服務器(koa框架)通信及服務器跨域配置詳解,具有一定的參考價值,有興趣的可以了解一下2017-08-08詳解使用Vue Router導航鉤子與Vuex來實現后退狀態(tài)保存
本篇文章主要介紹了詳解使用Vue Router導航鉤子與Vuex來實現后退狀態(tài)保存,具有一定的參考價值,有興趣的可以了解一下2017-09-09