Vue.js 之 说说自定义指令（一）

下面简单记录一下在学习Vue.js的过程中对自定义指令的bind和inserted的理解。

在Vue中构建自定义指令的模板：

Vue.directive('_name',{
    //以下为常用的生命周期钩子函数

    //bind只调用一次，当指令第一次绑定到元素后调用，用这个函数可以定义一个在绑定元素时执行一次的初    
    //始化操作，第一次参数为当前绑定元素，一般用'el'表示，el是一个原生的JS对象，触发一次
    bind:function(el){},
    //当被绑定元素插入到DOM（父节点）后调用，触发一次
    inserted:function(el){},
    //在VNode更新的时候执行，可能触发多次
    updated:function(el){}，
    //只调用一次，指令与元素解除绑定
    unbind:function(el){}
})

下面来看一张图：

 bind钩子函数调用是在内存中的，这时还没有构建DOM树，所以一般在这里不适合写一些方法之类的代码，因为没有构建DOM树，这些方法不会起作用，所以在这里一般写一些设置样式之类的初始化操作，因为设置的样式无论有没有构建DOM树，都会绑定给要绑定的元素，而且会被浏览器的渲染引擎所解析。

如果想让自己写的函数在元素上起到作用，最好把行为代码写到inserted钩子函数中，因为这时元素已经插入到DOM树（父节点）中了