Vue.js列表渲染绑定jQuery插件的正确姿势


Posted in jQuery onJune 29, 2017

使用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官方文档自定义指令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
基于jQuery封装的分页组件
Jun 26 #jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 #jQuery
jQuery实现一个简单的验证码功能
Jun 26 #jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 #jQuery
You might like
php生成过去100年下拉列表的方法
2015/07/20 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
jQuery的12招常用技巧分享
2011/08/08 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
python中os模块详解
2016/10/14 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
Python中pass语句的作用是什么
2016/06/01 面试题
应用心理学个人的求职信
2013/12/08 职场文书
新学期班主任寄语
2014/01/18 职场文书
班级安全教育实施方案
2014/02/23 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
班级口号大全
2014/06/09 职场文书
党员创先争优心得体会
2014/09/11 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书