浅谈vue中的自定义指令

众所周知，指令的本质就是标签中的vue自定义属性 ，

插值表达式只能用于标签之间的数据输出；在标签属性上，插值表达式无用武之地，但是有需要在属性中使用可变数据的情况，此时指令就能帮助我们解决这个问题。

除了核心功能默认内置的指令，Vue也允许开发者注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令绑定到元素上执行相关操作

自定义指令分为：全局指令和局部指令，当全局指令和局部指令同名时以局部指令为准（局部指令的优先级高于全局的）

自定义指令的写法有两种：函数形式和对象形式

指令的回调默认接收两个参数：当前绑定的DOM元素(element)和当前绑定的数据(binding)

一、函数形式的自定义指令

受限于写法，函数指令的执行时机只能是bind和update（对象写法中有详细说明）,此时，模板未挂载至页面，所以无法获取DOM以及对DOM进行一些操作（需要操作DOM的情况见对象形式的自定义指令）

//需求1、定义一个v-big指令，和v-text相似，但会把绑定的数值放大10倍

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

directives:{
  /**
  * big函数何时被调用？
  * 1、指令与元素成功绑定时（初始化时）
  * 2、指令所在的模板被重新解析时
  * 3、相当于对象写法的bind 和 update
  */
  big(element,binding){
    element.innerText = binding.value * 10
  }
}

二、对象形式的自定义指令

对象写法提供了对应的钩子函数，以便编码人员在合适的时机进行合适的操作

// 需求2、定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点

<input type="text" v-fbind:value="n">

directives:{
  /**
  * 函数形式的自定义指令执行时他操作的DOM还没有在页面中挂载完成 -> 对象写法
  */
   fbind:{
      bind(element,binding){},
      inserted(element,binding){},
      update(element,binding){},
      componentUpdated(){},
      unbind(){}
   }
}

三、定义全局的自定义指令

全局的自定义指令调用Vue.directive(' 自定义指令名 ' , ' 函数写法或者对象写法 ') 方法

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

Vue.directive('big',function(element,binding){
  element.innerText = binding.value * 10
})