3.Vue之自定义指令（钩子函数，实例属性）

介绍

除了内置指令，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：只调用一次，在指令从元素上解绑时调用。

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})
      属性指令举例：
       中的 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;
        }
    });

    使用：
     -----其实就是this.el.style.color = cname=colorname= “blue”，

4.自定义元素指令

    
//定义元素指令
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

官方自定义指令详解