• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Vue.js自定义指令的用法与实例解析

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

作者:kidney 字体:[增加 减小] 来源:互联网 时间:2017-05-11

kidney通过本文主要向大家介绍了vue.js指令,vue.js自定义指令,vue.js实例,vue.js项目实例,vue.js实例教程等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

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

效果:

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

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

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

效果:

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • vue.js指令v-model使用方法
  • Vue.js自定义指令的用法与实例解析
  • 实现一个简单的vue无限加载指令方法

相关文章

  • 2017-05-11javascript编写简易计算器
  • 2017-05-11addEventListener()与removeEventListener()解析
  • 2017-05-11jquery实现input框获取焦点的简单实例
  • 2017-05-11windows下vue-cli导入bootstrap样式
  • 2017-05-11简单的渐变轮播插件
  • 2017-05-11百度地图API之百度地图退拽标记点获取经纬度的实现代码
  • 2017-05-11JS中绑定事件顺序(事件冒泡与事件捕获区别)
  • 2017-05-11layer弹出层中H5播放器全屏出错的解决方法
  • 2017-05-11详解JS中的快速排序与冒泡
  • 2017-05-11angularjs指令之绑定策略(@、=、&)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • vue-cli如何快速构建vue项目
    • Angular实现购物车计算示例代码
    • nodejs入门教程三:调用内部和外部方法示例
    • jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
    • 微信小程序实现图片轮播及文件上传
    • VueJs路由跳转——vue-router的使用详解
    • Jqprint实现页面打印
    • nodejs中模块定义实例详解
    • jQuery使用ajax方法解析返回的json数据功能示例
    • BootStrap框架中的data-[ ]自定义属性理解(推荐)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有