分类目录归档：vue.js

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>