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 相关文章推荐
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
AngularJS内置指令
Feb 04 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
node实现简单的增删改查接口实例代码
Aug 22 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
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php实现图片添加水印功能
2014/02/13 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
Prototype使用指南之string.js
2007/01/10 Javascript
Gird事件机制初级读本
2007/03/10 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
vue实现搜索功能
2019/05/28 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
Python生成随机密码
2015/03/10 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python @property装饰器原理解析
2020/01/22 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL