vue 下拉列表自定义指令实现懒加载(无限滚动)

技术栈

• Vue.js
• ElementUi 

无限滚动优点

解决dom一次性渲染开销大, 导致浏览器卡顿, 或者内存不足崩溃

无限滚动缺点:

理论上无限滚动数据量达到w级也会逐步开始卡顿, 暂时还没尝试过

针对vue框架做了directive(自定义指令 — Vue.js)的形式开发, 代码如下

自定义指令拓展

指令钩子函数会被传入以下参数：

• ：指令所绑定的元素，可以用来直接操作 DOM。
• ：一个对象，包含以下 property：
  • ：指令名，不包括  前缀。
  • ：指令的绑定值，例如： 中，绑定值为 。
  • ：指令绑定的前一个值，仅在  和  钩子中可用。无论值是否改变都可用。
  • ：字符串形式的指令表达式。例如  中，表达式为 。
  • ：传给指令的参数，可选。例如  中，参数为 。
  • ：一个包含修饰符的对象。例如： 中，修饰符对象为 。
• ：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• ：上一个虚拟节点，仅在  和  钩子中可用。

文章参考

vue2.0 自定义指令 ++ element-ui 自定义el-select的下拉懒加载指令 – 灰信 （软件开发博客聚合）

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树自定义指令注册自定义指令23381 人正在系统学习中