自定义指令（钩子函数）

 自定义指令: 指令是个函数|对象,用来操作dom的, 里面的this 返回window

   a)全局:	Vue.directive('指令名不带v-',函数(el,binding))
     el == 使用指令的DOM元素
     binding 是个对象 含有传入的 参数(binding.value)
   b)局部:  定义在选项里面
     directives:{
       指令名不带v-	: 函数(el,binding){}
     }

   指令是个函数(简写)，可以是个对象

   {
     钩子函数
     inserted:fn(el,binding)		绑定指令的元素插入到父节点时调用
     bind:fn	指令第一次绑定到元素时调用
     update:fn	指令所在的元素的model层的数据，view有更新请求时
     componentUpdated:fn	更新完成时
   }

   简写方式: bind + update

    <div id="app">
      
      <div v-color="c1">box1</div>

      <h3 v-color>box2</h3>

      <p style="position: absolute;left:0;top:0;width:100px;height:100px;background:#ccc" v-drag>{{msg}}</p>
      
    </div>

    <script>
	//全局
      Vue.directive('color',function(el,binding){
        console.log('指令运行',el,binding,this);//window
        el.style.background=binding.value || 'red';
      })

      let vm = new Vue({

        el:'#app',
        
        data:{
          c1:'blue',
          msg:'box333'
        },
        //局部
        directives:{
          drag(el,binding){
            console.log('drag',this)

            el.onmousedown=function(ev){
              var disX = ev.clientX-el.offsetLeft;
              var disY = ev.clientY-el.offsetTop;
              document.onmousemove=function(ev){
                el.style.left = ev.clientX-disX + 'px';
                el.style.top = ev.clientY-disY + 'px';
              }
              document.onmouseup=function(){
                document.onmousemove=document.onmouseup=null;
              }
              return false;

            }
          }
        }

      })
    </script>
    new Vue({
      el:'#app',
      data:{
        c1:'btn btn-primary',
        arr:[{btn:false},{'btn-primary':true}],
        s1:'background:red;color:blue'
      }
    })
  </script>

钩子函数

    <div id="app">
      
      <input type="text" name="" >
      <!-- <input type="text" name="" v-focus> -->
      <input type="text" name="">

      <div v-focus>
        {{msg}}
        <div>
          <div>{{msg2}}</div>
        </div>
      </div>

    </div>

    <script>

      Vue.directive('focus',(el,binding)=>{
        console.log('指令');
        el.focus()
      })

      /* Vue.directive('focus',{
        inserted:(el,binding)=>{
          console.log('绑定指令的元素插入到父节点时调用');
          el.focus()
        },
        bind:(el,binding)=>{
          console.log('指令第一次绑定到元素时调用');
          // el.focus()
        },
        update:(el,binding)=>{
          console.log('指令所在的元素的model层的数据，view有更新请求时');
        },
        componentUpdated:(el,binding)=>{
          console.log('更新完成时');
        },
      }) */


      let vm = new Vue({

        el:'#app',
        
        data:{
          msg:'数据1',
          msg2:'数据2',
          msg3:'数据3',
        } 
      })
   
   </script>