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

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

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

效果：

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

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

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

效果：

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

　　更多的用法请参考：

　　http://codepen.io/search/pens?q=custom%20directive&limit=all&order=popularity&depth=everything&show_forks=false

Vue.js自定义指令的用法与实例的更多相关文章

  1. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  2. vue.js自定义指令详解

    写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义 ...

  3. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  4. vue 自定义指令（directive）实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  5. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  6. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  7. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  8. vue 通过自定义指令实现 置顶操作；

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  9. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

随机推荐

  1. Eclipse 配置工程

    Eclipse改UTF-8 Window->Preferences->General->Workspace->Text file Encoding Eclipse配置tomca ...

  2. html 自定义标签的作用

    比如早期的时候,如果浏览器不支持 nav 这个标签的话, style标签中的样式 nav {color: yellow}会不起作用,字体不会变黄. 怎么处理兼容性呢? 用 javascript. 加上 ...

  3. ural1414 Astronomical Database

    Astronomical Database Time limit: 2.0 secondMemory limit: 64 MB After the Hubble telescope had been ...

  4. iOS JsonModel

    iOS JsonModel 的使用 本文转自:http://blog.csdn.net/smking/article/details/40432287 下面讲一下JSONModel的使用方法. @in ...

  5. angularJS 系列（三）- 自定义 Service

    参考:http://viralpatel.net/blogs/angularjs-service-factory-tutorial/ https://www.pluralsight.com/blog/ ...

  6. cakephp 2.0 源码解读（一）

    lib - Cake -basic.php -bootstrap.php -Cache -Config -Configure -Controller -Core -Error -Event -I18n ...

  7. IBATIS事务处理 - - 博客频道 - CSDN.NET

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  8. mysql表明保存不了，多了空格都不行啊

    mysql表明保存不了,多了空格都不行啊

  9. 最新 Spring 4.2.2 集成 Quartz Scheduler 2.2.2 任务调度示例

    参考http://blog.csdn.net/defonds/article/details/49496895 本文将演示如何通过 Spring 使用 Quartz Scheduler 进行任务调度. ...

  10. session cookie用法

    1.session(1)session存储在服务器的(2)session每个人存一份(3)session有默认的过期时间(4)session里面可以存储任意类型的数据安全,对服务造成压力用法:1.当一 ...