vue自定义指令使用详解

1、当需要对普通DOM元素进行底层操作的时候，可以使用自定义指令。

2、使用规则：代码如下所示

<div id="app">
	<!--使用全局自定义指令-->
    <input v-focus />
    <!--使用局部自定义指令-->
    <div v-dir1></div>
    <input type="text" v-focus2>
</div>

Vue.directive('focus',{
  // inserted钩子函数：被绑定元素插入父节点时调用，仅保证父节点存在，但不一定已被插入文档中
  inserted(el){
    el.focus()
    console.log(el)
  }
})

var vm = new Vue({
  el:'#app',
  data:{

  },
  // 创建指令，可以多个，局部自定义指令
  directives:{
    // 第一个
    dir1:{
      inserted(el){
        console.log(el)
        console.log(arguments)
        // 对DOM进行操作
        el.style.width = '200px'
        el.style.height = '200px'
        el.style.background = 'orange'
      }
    },
    focus2:{
      inserted(el,vnode,oldVnode){
        el.focus()
        console.log(vnode)
        console.log(oldVnode)
      }
    }
  }
})

3、钩子函数：来自官方文档


钩子函数的参数：