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 tip提示插件(实例分享)
Apr 28 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现手风琴特效
Jan 11 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生成等比缩略图类和自定义函数分享
2014/06/25 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
python实现RSA加密(解密)算法
2016/02/17 Python
使用Python对Access读写操作
2017/03/30 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
数控专业推荐信范文
2013/12/02 职场文书
银行演讲稿范文
2014/01/03 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
合伙协议书范本
2014/04/21 职场文书
幼儿评语大全
2014/04/30 职场文书
技校毕业生自荐信
2014/06/03 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
《灰雀》教学反思
2016/02/19 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书