VUE学习之路（二）---全局API 之 Vue.directive

一。全局API：

APIA全局并不在构造器里，而是先声明全局变量或者直接再VUE上定义一些新功能，VUE内置了一些全局APII，比如Vue.directive。简单讲，就是在构造器外部用Vue提供给我们的API函数来定义新的功能。

二。Vue.directive

1.我们用自定义指定做一个小例子，让初始化的时候数字为绿色。

    
    
    
    
    


    
vue.directive 自定义指令
    

    

        
{{ num }}
        
ADD
    

    

        解绑
    

    

2.自定义指令中传递的三个参数：

el : 指令所绑定的元素，可以用来直接操作DOM

binding :一个对象，包含指令的很多信息。

vnode :Vue编译生成的虚拟节点

3.自定义函数的生命周期：

            bind:function(){//被绑定
                console.log('1 - bind');
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解除绑定
                console.log('5 - unbind');
            }




在具体例子中，写
Vue.directive("jspang",{
            bind:function(){//被绑定
                console.log('1 - bind');
            },
            inserted:function(){//绑定到节点
                console.log('2 - inserted');
            },
            update:function(){//组件更新
                console.log('3 - update');
            },
            componentUpdated:function(){//组件更新完成
                console.log('4 - componentUpdated');
            },
            unbind:function(){//解除绑定
                console.log('5 - unbind');
            }
        });
可以就是某个特定的阶段函数，增加语句来实现特定的效果。就比如文章上面的绿色数字。