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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
VUE动态生成word的实现
Jul 26 Javascript
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 面向对象详解
2012/09/13 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python控制多进程与多线程并发数总结
2016/10/26 Python
详解python3百度指数抓取实例
2016/12/12 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python Pandas 箱线图的实现
2019/07/23 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
实习求职信
2013/12/01 职场文书
高中生学习的自我评价
2013/12/14 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
旷课检讨书500字
2014/10/14 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书