1.1什么是自定义指令？

  简单的来说就是自己定义的指令

  作用：操作底层dom

1.2自定义指令有两种

  全局自定义指令 : vue.directive:{"",{}}

  局部自定义指令：directives:{指令名：{钩子函数}}

1.3有五个钩子函数

  bind(){} 只调用一次，指令第一次绑定到元素时调用  

   unbind(){}只调用一次， 指令与元素解绑时调用

    inserted(){} 被绑定元素插入父节点时调用

  update ：所在组件的 VNode 更新时调⽤，但是可能发⽣在其⼦VNode 更新之前。

 componentUpdated ：指令所在组件的 VNode 及其⼦ VNode 全部更新后调⽤

1.4参数有4个

el:所绑定的元素，直接操作dom

binding:一个对象,包含原型

vnode:将vue编写生成的虚拟jiedian

oldvnode:上一个虚拟节点，仅在update和componentUpdated中使用

1.5使用场景

1自定义拖拽，2表单自动获取焦点

1.1在局部指令中定义   注意：directives与methodds写法同级

       directives:{
            drag:{//自定义指令名
                inserted(el){//钩子
                   el.onmousedown=e=>{//鼠标按下
                       console.log(e)
                       var left = e.x - el.offsetLeft
                       var top = e.y - el.offsetTop
                    document.onmousemove=e=>{//鼠标移动
                        el.style.left=e.x-left+'px'
                        el.style.top=e.y-top+'px'
                    }   
                    document.onmouseup=()=>{//鼠标离开，清除移动
                        document.onmousemove=null
                    }
                   }
                }
            }
        },

2.在标签中通过v-drag 来使用 

    <div class="box">
       <div class="item" v-drag>
          内容
       </div>
    </div>

3.style样式中必须把要拖动的元素设置相对定位

<style lang="scss" scoped>
.box{
    width: 100%;
    height: 100%;
    position: relative;
    .item{
        position: absolute;
        padding: 100px 200px;
        border: 1px solid black;

    }
}
</style>

2 表单自动获取焦点

 2.1：1.在局部指令中定义 注意：directives与methodds写法同级

      directives:{
             focus:{//指令名
                inserted(el){//钩子
                    el.focus()//聚焦
                }
            }
        }

2.2：在template中通过v-focus 指令名获取

<input type="text" placeholder="搜索" v-focus>