vue的directive的两种实现方式

引入第三方js组件的正确姿势是采用vue.directive的方式,而其它方式如下,

//以下方式引入第三方组件,会出现两次绘制对,也即在调试过程中可能会出现一些奇怪的问题,不建议使用这种方法。
export default {
   mounted: function () {
      this.$nextTick(function () {
         // todo: editor = CodeMirror.fromTextArea(document.getElementById('editor');
      }
   }
}

第一种,直接在app.js中添加指令如下:

Vue.directive('drag', {  
    inserted:function(el){  
        el.onmousedown=function(e){  
            let l=e.clientX-el.offsetLeft;  
            let t=e.clientY-el.offsetTop;  
            document.onmousemove=function(e){  
                el.style.left=e.clientX-l+'px';  
                el.style.top=e.clientY-t+'px';  
            };  
            el.onmouseup=function(){  
                document.onmousemove=null;  
                el.onmouseup=null;  
            }  
        }  
    }  
})  
new Vue({  
  el:'#app'  
});

第二种,直接在vue的组件中添加如下

<template>
    <div>
        <input v-model="dir1" v-my-directive1="dir1"/>
     <input v-model="dir2" v-my-directive2="dir2"/>
    </div>
</template>
<script>
    export default {
        data(){
            return {
         dir1:'',
         dir2:''
 
       }
        },
        directives:{
       //直接绑定函数,作用等同于update,不做准备工作和扫尾工作
            myDirective1(val){
                console.log(val)
            },
       myDirective2:{
          bind(){
             //第一次绑定到元素的准备工作
          },
          update(val,old){
            //在绑定到元素后立即以初始值第一次调用,然后每次example2变化都会调用update
            console.log(val)
          },  
          unbind(){
            //销毁前的清理工作
          }
       }
        }
    }
</script>