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判断浏览器是否是IE的比较好的办法
May 08 Javascript
Prototype Hash对象 学习
Jul 19 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
使用angular写一个hello world
Jan 23 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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获取提交内容的实现方法
2016/05/25 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
List Installed Hot Fixes
2007/06/12 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python进程间通信Queue实例解析
2018/01/25 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
竞职演讲稿范文
2014/01/11 职场文书
大学毕业感言50字
2014/02/07 职场文书
教室标语大全
2014/06/21 职场文书
护士求职信
2014/07/05 职场文书
施工安全协议书范本
2014/09/26 职场文书
党员年终个人总结
2015/02/14 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA