Vue.js自定义指令的用法与实例解析


Posted in Javascript onJanuary 18, 2017

市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用。本文不讲语法,就讲自定义指令的用法。

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。

比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来。用自定义指令可以非常方便的实现这个功能。

Vue.js自定义指令的用法与实例解析

Vue.js自定义指令的用法与实例解析

效果:

Vue.js自定义指令的用法与实例解析

自定义指令的第二用处是用于集成第三方插件。我们知道任何软件开发领域都可以分为四层:底层是原生的API,上层是通用框架,再上层是通用组件,最上层才是具体的业务代码。一个通用框架,必须搭配一套完整的通用组件,才能真正奠定其江湖地位。

在前端开发领域,以前的通用框架是jQuery,jQuery以及基于jQuery构建的通用组件形成了一个庞大的生产系统。现在的通用框架是Angular、React和Vue,每个框架都需要基于自身构建新的组件库。自定义指令好就好在:原先的那些通用组件,无论是纯js的也好,基于jQuery的也好,都可以拿来主义直接吸收,而不需要改造或重构。

比如写文档通常会用到highlight.js,我们可以直接将其封装为一个自定义指令,这样highlight.js就变成了Vue的一个新功能。

Vue.js自定义指令的用法与实例解析

Vue.js自定义指令的用法与实例解析

效果:

Vue.js自定义指令的用法与实例解析

但凡遇到第三方插件如何与Vue.js集成的问题,都可以尝试用自定义指令实现。

以上所述是小编给大家介绍的Vue.js自定义指令的用法与实例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
js只执行1次的函数示例
Jul 20 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
vue.js+Element实现表格里的增删改查
Jan 18 #Javascript
JS中Array数组学习总结
Jan 18 #Javascript
原生javascript实现图片放大镜效果
Jan 18 #Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 #Javascript
原生js实现回复评论功能
Jan 18 #Javascript
js实现表格筛选功能
Jan 18 #Javascript
js放大镜放大购物图片效果
Jan 18 #Javascript
You might like
PHP中余数、取余的妙用
2015/06/29 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
require.js中的define函数详解
2017/07/10 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python实现图像全景拼接
2020/03/27 Python
python3 re返回形式总结
2020/11/20 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
某科技软件测试面试题
2013/05/19 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
个人近期表现材料
2014/02/11 职场文书
新店开张活动方案
2014/08/24 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
离职报告格式
2014/11/04 职场文书
财务审计整改报告
2014/11/06 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL