vue本身提供了很多的指令，但是有的时候，我们需要一些特殊的指令来实现我们特定的功能，那就需要自定义指令，来丰富组件的功能和特性；

如何自定义指令：

Vue.directive("指令名",fn);

第一个参数：指令的名称；
第二个参数：是一个方法，定义指令的相关功能。
注意：
fn函数中，第一个参数是该指令所在的整个元素，vue会自动传进来；
第二个参数是指令对应的对象；该指令对象里面包含了指令的基本信息；
如下定义一个定住的指令：

    Vue.directive('pin',function(el,obj){
        var pinned = obj.value;//在html该指令中传入的值
        if (pinned) {
            el.style.position = 'fixed';
            el.style.top="20px";
            el.style.left="20px";
        }else{
            el.style.position = 'static';
        }
    });

指令的传参及修饰符

在定义指令时，可以通过fn函数的第二个参数获取指令对应的值（obj.value）
也能获得指令的参数obj.arg
以及指令的修饰符obj.modifiers
通过获取的指令参数和修饰符来操作元素

1. 通过obj.modifiers获取指令修饰符来操作元素样式

    Vue.directive('pin',function(el,obj){
        var pinned = obj.value;
        var position = obj.modifiers;//指令的修饰符
        if (pinned) {
            el.style.position = 'fixed';
            for(var val in position){               
                if (position[val]) {
                    el.style[val]='10px';                   
                }
            }
        
    
        }else{
            el.style.position = 'static';
        }
    });

2. 通过obj.arg获取指令的参数，根据参数来操作元素样式
   参数位置:

指令：参数名
<div  v-pin:warning="xxx">

    Vue.directive('pin',function(el,obj){
        var pinned = obj.value;
        var position = obj.modifiers;
        var args = obj.arg;
        if (pinned) {
            el.style.position = 'fixed';
            if (args=="warning") {
                el.style.backgroundColor="red";
            }
            for(var val in position){               
                if (position[val]) {
                    el.style[val]='10px';                   
                }
            }   
        }else{
            el.style.position = 'static';
            el.style.backgroundColor="";
        }
    });