Vue.js实战学习笔记----基础篇----Vue自定义指令

1、基本用法

（1）自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册 v-focus 的指令，用于在＜input> 、＜textarea>元素初始化时自动获得焦点，两种写法分别是：

写法与组件基本类似，只是方法名由 component 改为了 directive 。上例只是注册了自定义指令v-focus ，还没有实现具体功能，下面具体介绍自定义指令的各个选项。

（2）自定义指令的选项是由几个钩子函数组成的，每个都是可选的。

可以根据需求在不同的钩子函数内完成逻辑代码，例如上面的 v-focus ，我们希望在元素插入父节点时就调用，那用到的最好是 inserted 。示例代码如下：

（3）每个钩子函数都有几个参数可用

（4）例子

（5）如果需要多个值，自定义指令也可以传入一个JavaScript 对象字面量 只要是合法类型的JavaScript 表达式都是可以的，示例代码如下：

（6）注意

Vue 2.x 移除了大量 Vue 1.x 自定义指令的配置。在使用自定义指令时，应该充分理解业务需求，因为很多时候你需要的可能并不是自定义指令而是组件。

2.实战1

（1）开发一个可从外部关闭的下拉菜单

特点：一是点击下拉菜单本身是不会关闭的，二是点击下拉菜单以外的所有区域都要关闭。点击所有区域可以在 document 上绑定 click 事件来实现，同时只要过滤出是否点击的是目标元素内部的元素即可。

（2）html

 （3）clickoutside.js

自定义指令v-clickoutside绑定了一个函数handleClose，用来关闭菜单。

1）之前分析过，要在 document 上绑定 click 事件，所以在 bind 钩子内声明了 个函数documentHandler,并将它作为句柄绑定在 document 的 click 事件上。 documentHandler 函数做了两个判断，第一个是判断点击的区域是否是指令所在的元素内部，如果是，就跳出函数，不往下继续执行。

2）contains方法是用来判断元素A是否包含了元素B，包含返回true，不包含返回false。

3）第二个判断的是当前的指令v-clickoutside有没有写表达式，在该自定义指令中，表达式应该是一个函数，在过滤了内部函数后，点击外面任何区域应该执行用户表达式中的函数，所以binding.value()就是用来执行当前上下问methods中指定的函数的。

4）与Vue 1.x 不同的是，在自定义指令中，不能再用this.xxx 形式在上下文中声明一个变量，所以用了 el._vueClickOutside_引用了 docurnentHandler 这样就可以在unbind 钩子里移除对document的click 事件监听。如果不移除，当组件或元素销毁时，它仍然存在于内存中。

3.实战2

（1）开发一个实时事件转换指令v-time（将表达式传入的时间戳实时转换为相对时间）

（2）html

（3）时间转换的逻辑

（4）time.js

（5）指令定义

（6）总结