介绍
除了内置指令，Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。
可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令，它接收两个参数指令 ID 与定义对象。
正文
特点：
1、指令的定义一定要放到 new Vue({}) 代码之前，否则报错并且无效
2、在利用Vue.directive()注册指令的时候，不需要加上v- 这个前缀
3、在dom元素上使用的时候，必须加上v- 前缀
4、如果想要给自定义属性指令传入参数，则注意：
- 1在注册的时候要利用 params:[] 来接收参数
- 2 通过bind:function(){}中 利用 this.params点出和parms:[]中定义的那个字符串同名的属性
- 3在dom元素上使用的时候
- 4 通过 v-color空格更上 parmas:[]中定义好的同名的参数名称
1.钩子函数
定义对象可以提供几个钩子函数（都是可选的）：
•bind：只调用一次，在指令第一次绑定到元素上时调用。
•update： 在 bind 之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值。
•unbind：只调用一次，在指令从元素上解绑时调用。
<div v-my-directive="someValue"></div>
Vue.directive('my-directive', {
bind: function () {
// 准备工作
// 例如，添加事件处理器或只需要运行一次的高耗任务
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如，删除 bind() 添加的事件监听器
}
})
2.指令实例属性
所有的钩子函数将被复制到实际的指令对象中，钩子内 this 指向这个指令对象。这个对象暴露了一些有用的属性：
•el: 指令绑定的元素。
•vm: 拥有该指令的上下文 ViewModel。
•expression: 指令的表达式，不包括参数和过滤器。
•arg: 指令的参数。
•name: 指令的名字，不包含前缀。
•modifiers: 一个对象，包含指令的修饰符。
•descriptor: 一个对象，包含指令的解析结果
3.自定义属性指令
1、自定义属性指令Vue.directive(指令id（注意不能以v-开头，将来在使用的时候自动加上）,function(){this.el})
属性指令举例：
<input type="text" v-focus> 中的 v-focus 这个指令我们称之为自定义属性指令
定义格式：
Vue.directive('focus',{
bind:function(){
//这个指令的逻辑
//可以利用this.el来获取到当前指令所在的元素对象
this.el.style.color = 'red';
}
});
////定义一个带有参数的自定义指令
Vue.directive('color',{
params:['colorname'],
bind:function(){
//1.0 获取到colorname的值
var cname = this.params.colorname;
//2.0 获取到el以后给其赋予一个样式
this.el.style.color = cname;
}
});
使用：
<input type="text" v-model="productid" v-color colorname="blue" > -----其实就是this.el.style.color = cname=colorname= “blue”，
4.自定义元素指令
<my-v-datefmt></my-v-datefmt>
//定义元素指令
Vue.elementDirective('my-v-datefmt',{
bind:function(){
//逻辑代码
var date = new Date(this.vm.time);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//输出： yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
this.el.innerText = fmtStr;
}
});
new Vue({
el:'#app',
data:{
time:new Date()
},
methods:{
}
});
结果
2017-6-14
