vue自定义指令的创建和使用

为什么？

vue自带的指令很多，v-for/v-if/v-show/v-on/v-bind/v-text/v-html等等，但是这些指令比较偏向工具化，在实现具体业务逻辑的时候根本不够用，所以往往需要自定义指令

如何创建自定义指令？

局部自定义指令

new Vue({
            el:"#container",
            directives:{
                change:{
                    bind:function(){}

                    update:function(){}

                    unbind:function(){}
                }
            }
        })

全局指令

Vue.directive('自定义指令名称',function(el,bindings){})

在自定义指令时，在指令对应的配置对象中有三个处理函数指令对应的操作

bind 指的是指定绑定到元素时需要执行的操作

update 在调用指令的时候，传了参数，当参数变化的时候，会执行update所指定的方法

unbind   解绑需要执行的操作

如何调用自定义指令？

v-指令名称

小练习 

实现一个自定义指令change-background-color  

在调用指令的时候，可以传递参数，根据参数的值，修改调用该指令的元素的背景颜色

注意事项 

建议在指令命名的时候采用小驼峰命名方式，例如changeBackgroundColor,在调用的时候采用烤串式写法  例如--change-background-color