Vuejs全家桶系列（六）---自定义指令

简介

Vue.js 允许你注册自定义指令，实质上是让你教 Vue 一些新技巧：怎样将数据的变化映射到 DOM 的行为。你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令。定义对象需要提供一些钩子函数（全部可选）：

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。

格式

第一种写法（可选择下面的多个方法）

Vue.directive('hello',{
    bind(){
        alert('指令第一次绑定到元素上时调用，只调用一次，可执行初始化操作');
    },
    inserted(){
        alert('被绑定元素插入到DOM中时调用');
    },
    update(){
        alert('被绑定元素所在模板更新时调用');
    },
    componentUpdated(){
        alert('被绑定元素所在模板完成一次更新周期时调用');
    },
    unbind(){
        alert('指令与元素解绑时调用，只调用一次');
    }
});

第二种写法（只调用bind和update）

//传入一个简单的函数，bind和update时调用
Vue.directive('wbs',function(){
    alert('wbs17022');
});

一旦注册好自定义指令，你就可以在 Vue.js 模板中像这样来使用它（需要添加 Vue.js 的指令前缀，默认为 v-）：

<div v-my-directive="someValue"></div>

常用的方法

• bind

  仅调用一次，当指令第一次绑定元素的时候。
  

• update

  第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值；以后每当绑定的值发生变化就会被调用，获得新值与旧值两个参数。
  

• unbind

  仅调用一次，当指令解绑元素的时候。
  

常用的属性

上下文环境。指令对象上暴露了一些有用的公开属性：

el: 指令绑定的元素
vm: 拥有该指令的上下文 ViewModel
expression: 指令的表达式，不包括参数和过滤器
arg: 指令的参数
raw: 未被解析的原始表达式
name: 不带前缀的指令名

应用

实现drag指令

功能：使dom节点可以拖拽

Vue.directive('drag',function(el){
    el.onmousedown=function(e){
        //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
        var disX=e.clientX-el.offsetLeft;
        var disY=e.clientY-el.offsetTop;
        // console.log(disX,disY);
        //包含在onmousedown里面，表示点击后才移动，为防止鼠标移出div，使用document.onmousemove
        document.onmousemove=function(e){
            //获取移动后div的位置：鼠标位置-disX/disY
            var l=e.clientX-disX;
            var t=e.clientY-disY;
            el.style.left=l+'px';
            el.style.top=t+'px';
        }

        //停止移动
        document.onmouseup=function(e){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
});