• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > Vue.js自定义指令的用法与实例解析

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

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

本文主要包含vue.js指令,vue.js自定义指令,vue.js实例,vue.js项目实例,vue.js实例教程等相关知识,kidney 希望在学习及工作中可以帮助到您

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

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

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

效果:

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

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

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

效果:

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

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

</div>

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

  • vue.js指令v-model使用方法
  • Vue常用指令V-model用法
  • Vue.js自定义指令的用法与实例解析
  • 实现一个简单的vue无限加载指令方法
  • Vue自定义指令介绍(2)
  • vue.js指令v-model实现方法
  • Vue.js常用指令汇总(v-if、v-for等)
  • vue自定义指令实现v-tap插件
  • vue.js指令v-for使用及索引获取
  • vue.js通过自定义指令实现数据拉取更新的实现方法

相关文章

  • 2017-05-30自带气泡提示的vue校验插件(vue-verify-pop)
  • 2017-09-18Vue v-if v-show语法
  • 2017-05-30Vue + Webpack + Vue-loader学习教程之功能介绍篇
  • 2017-05-30100行代码理解和分析vue2.0响应式架构
  • 2017-05-30Vue 2.X的状态管理vuex记录详解
  • 2017-05-30Vue.js -- 过滤器使用总结
  • 2017-05-30Vue 2.0中生命周期与钩子函数的一些理解
  • 2017-08-02如何在vue中引入第三方jquery,swiper等库(一)
  • 2017-05-30使用vue.js实现checkbox的全选和多个的删除功能
  • 2017-05-30vue.js+boostrap项目实践(案例详解)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • vue.js初学入门教程(2)
    • Vue 2.0 服务端渲染入门介绍
    • 关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
    • vue分类筛选filter方法简单实例
    • vue拦截器Vue.http.interceptors.push使用详解
    • 概述VUE2.0不可忽视的很多变化
    • Vue.js每天必学之计算属性computed与$watch
    • vue-cli入门之项目结构分析
    • vue.js之vue-cli脚手架的搭建详解
    • vue打包项目后正确显示图片

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

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