函数式自定义指令v-xxx：

<h2>放大10倍后的n值是:<span v-big="n"></span></h2>

局部方式：

new Vue( {
    el:'#root',
    data:{
        n:1
    },
    directives:{ 
    // big函数何时会被调用？ 1.指令与元素成功绑定时(一上来)
    //                     2.指令所在的模板被重新解析时
        big(element, binding){
            element.innerText = binding.value * 10
    }
}

全局方式：

Vue.directive('big',function(element, binding){
    console.log('big',this)  // this -> Window
    element.innerText = binding.value * 10
})

自定义函数big(element, binding)收到的参数：

参数1：element

被绑定的HTML元素：<span></span>

参数1：binding

绑定信息：{name: "big", rawName: "v-big", value: 1, expression: "n"，...}

对象式自定义指令v-xxx：

局部方式：

directives:{
    fbind:{
        bind(){  // 指令与元素成功绑定时调用(一上来),this -> Window
            element.value = binding.value
        },
        inserted(){  // 指令所在元素被插入页面时调用,this -> Window
            element. focus()
        },
        update(){  // 指令所在的模板被重新解析时调用,this -> Window
            element.value = binding.value
        }
}

全局方式：

Vue.directive('fbind',{
    bind(element , binding){
        element.value = binding.value
    },
    inserted(element , binding){ 
        element. focus()
    },
    update(element. , binding){
        element.value = binding.value
    }
})

总结：

定义语法:

(1)局部指令:

new Vue({
    directives:{ 指令名xxx:配置对象bind(){};inserted(){};update(){}; }
})
或
new Vue({
    directives:{ 指令名xxx:回调函数fun(){} }
})

(2)全局指令:

Vue.directive(指令名,配置对象)
或
Vue.directive(指令名，回调函数)

配置对象中常用的3个回调:

(1)bind:指令与元素成功绑定时调用
(2)inserted:指令所在元素被插入页面时调用
(3)update:指令所在模板结构被重新解析时调用

备注:

1.指令定义时不加V-，但使用时要加V-;
2.指令名如果是多个单词，要使用kebab-case命名方式，不用camelCase命名
  例如：<span v-big-number="n"></span>
          directives:{
              'big-number'(element, binding){
          }