Vue – 自定义指令

简介

Vue 自带的指令有非常多，比如 v-if 、v-show.这些都是Vue自带给我们使用的指令。

Vue 还提供了用户自定义指令的方法，用户可以自定义创建指令，自定义指令方法。

自定义指令

Vue 提供了一个用于存放自定义指令的对象属性【directives】,在对象属性中，定义自定义指令方法，该方法用在标签上需要在前面添加前缀【v-】.

定义一个自定义指令【hello】,在标签中使用时则是【v-hello】

  directives:{
    hello(element,binding){
      
    }
  }

自定义指令接收两个参数，分别是 element 和 binding

element : 传过来使用了这个指令的真实dom元素

binding : 使用这个指令的一些参数数据，是一个对象，里面包含包括【value】在内的指令信息。

<div v-hello="1+1">
element : div 元素本身
binding : v-hello 的基本信息，如 value = 2 -> 传来的(1+1)计算后的结果

注意：在directives中的方法中的 this 为 window

对象定义指令

指令的使用Vue定了三个阶段的行为，分别是【指令与元素完成绑定】、【元素被创建完成】、【元素内容被更新】

【指令与元素完成绑定】：该阶段的元素只局限在元素与指令已完成了关系绑定，如果元素不在页面上时，该元素在此阶段依然没有被渲染，因此在这个阶段中操作一些需要存在页面上的dom方法时将会失效，如focus获取焦点。

【元素被创建完成】：该阶段的元素已经被渲染到页面上，可以操作一些需要存在页面上的dom方法

【元素内容被更新】：当所在的页面被重新渲染时，该阶段会被调用，不仅仅是因为使用了该指令的元素，是只要其它数据发生改变，页面被重新渲染时，Vue需要重新获取数据时，该阶段都会被调用。

  directives:{
    hello:{
      // 【指令与元素完成绑定】
      bind(element,binding){},
      // 【元素被创建完成】
      inserted(element,binding){},
      // 【元素内容被更新】
      update(element,binding){},
      // 绑定被解除
      unbind(element,binding){}
    }
  }

全局自定义指令

对象式声明：

Vue.directive('hello',{
      bind(element,binding){},
      inserted(element,binding){},
      update(element,binding){},
      unbind(element,binding){}
})

方法式声明：

Vue.directive('hello',function(element,binding){
  
})