这次分享的是关于Vue自定义指令的使用方法，学习完基础后我们再来实战完成一个下拉列表，废话不多说，直接上干货
基本用法
//全局注册
Vue.directive('my-directive', {
// 指令选项
})
// 局部注册
var app = new Vue({
el: '#app'
directives: {
'my-directive': {
// 指令选项
}
})
相信对Vue比较熟悉的人看完都知道，directive的写法与组件 基本类似，只是方法名由component改为了directive。上例只是注册了自定义指令v-my-directive，还没实现具体功能，下面具体介绍 自定义指令的各个选项。
指令定义函数提供了几个钩子函数 (可选)：
可根据需求在不同的钩子函数 内完成逻辑代码，如下面v-focus,我们希望在元素插入父节点时就调用，那用到的最好的就是inserted了。示例代码如下
// html部分
<div id="app" v-focus>
// js部分
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
效果如下图所示
自定义指令 v-focus.png
可以看到，打开这个页面，input输入框就自动获取焦点了，成为可输入状态。
每个钩子函数 都可以有几个参数可用，比如我们上面用到了el。它们 的含义如下：
下面是结合了以上参数 的一些具体示例，代码如下
// HTML部分
<div id="app" v-demo:msg.a.b="message">
<div v-text:msg.a.b="message"></div>
</div>
// JS部分
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + binding.name + '<br>' +
'value: ' + binding.value + '<br>' +
'expression: ' + binding.expression + '<br>' +
'argument: ' + binding.arg + '<br>' +
'modifiers: ' + JSON.stringify(binding.modifiers).modifiers + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(',')
}
})
new Vue({
el: '#app',
data: {
message: 'some text'
}
})
执行后，<div>的内容会使用innerHTML重置，结果为
name: "test"
value: "some text"
expression: "message"
argument: "msg"
modifiers: {"a":true,"b":true}
vnode keys: tag, data, children, text, elm, ns, context, functionalContext, functionalOptions, functionalScopeId, key, componentOptions, componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce, asyncFactory, asyncMeta, isAsyncPlaceholder
在多数使用场景，我们会在bind钩子里绑定一些事件，比如在document上用addEventListerer绑定，在unbind里有
removeEventListener 解绑，比较典型的示例就是让这个元素随着鼠标拖拽。
如果需要更多个值，自定义指令也可以传入一个JavaScript对象字面量， 只要是合法类型的JavaScript表达式都是可以的。示例代码如下：
// HTML部分
<div id="app" v-demo:msg.a.b="message">
<div v-test="{msg: 'hello', name: 'Aresn'}"></div>
</div>
//JS部分
Vue.directive('test', {
bind: function (el, binding, vnode) {
console.log(binding.value.msg)
console.log(binding.value.name)
}
})
var app = new Vue({
el: '#app'
})
Vue 2.x很移除大量Vue 1.x自定义指令的配置。在使用自定义指令时，应该充分解业务需求，因为很多时候你需要的可能并不是自定义指令，而是组件。
基础的东西讲完了，我们来根据directive提供的API来写一个点击外部区域可以让其下拉列表消失的菜单
// HTML部分
<div id="app" v-clock>
<div class="main" v-clickoutside="handleClose">
<button @click="show = !show">点击显示下拉菜单</button>
<div class="dropdown" v-show="show">
<p>下拉框内容，点击外面区域可以关闭</p>
</div>
</div>
// JS部分
var app = new Vue({
el: '#app',
data: {
show: false
}，
methods: {
handleClose() {
this.show = false;
}
}
})
Vue.directive('clickoutside', {
bind: function(el, binding, vode) {
function documentHandler (e) {
if (el.contains(e.target)) {
return false
}
if (binding.expression) {
binding.value(e)
}
}
el.__vueClickOutSide__ = documentHandler
document.addEventListener('click', documentHandler)
},
unbind: function(el, binding) {
document.removeEventListener('click', el.__vueClickOutSide__)
delete el.__vueClickOutSide__
}
})
要在document上绑定click事件，所以在bind钩子内声明了一个函数documentHandler，并将它作为句柄定在document的click事件上。documentHandler函数做了两个判断，第一个是判断点击的区域是否是指令所在的元素内部，如果是，就跑出函数，不信下继续执行
contains方法是用来判断元素A是否包含了元素 B，包含返回true，不包含返回false
// HTML
<div id="parent">
父元素
<div id="children">子元素</div>
</div>
// JS
var a = doucment.getElemengById('parent')
var b = doucment.getElemengById('children')
console.log(A.contains(B)) // true
console.log(B.contains(A)) // false
第二个判断是当前 的指令v-clickoutside有没有写表达式，在该自定义指令中，表达 式应该是第一个函数 ，在过滤了内部元素后，点击外面任何区域应该招待用户表达 式中的函数 ，所以binding.value就用来执行上下文methods中指定的函数的
下载本文