vue中自定义指令总结！！！

一、配置对象中常用的三个回调
1 .bind：指令与元素成功绑定时调用
2 .inserted：指令所在元素被插入页面时调用
3 .update：指令所在模板结构被重新解析时调用
局部指令

new Vue({
directives:{指令名:配置对象}
})
或者
new Vue（{
directives(指令名:回调函数)
}）

全局指令

Vue.directive(指令名,配置对象)
或者
Vue.directive(指令名,回调函数)

注意事项
1、指令定义时不加v-，但使用时要加v-
2、指令名如果是多个单词，要使用“-”隔开（kebab-case）命名方式，不要用camelCase（驼峰命名法）命名

<div id="root">   //根
    <h2>当前n的值是：{{n}}</h2>   //触发指令后的值为10
    <h2>10倍后的n值是：<span v-big="n"></span></h2>
<!--    <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>-->
    <button @click='add++'>点我+1</button>
    <input type="text" v-fbind="n">
</div>
<script>
    /*
    定义全局指令
    Vue.directive('big',function(element,binding){
        element.innerText = binding.value * 10
    })
    Vue.directive('fbind',{
        /!*指令与元素成立绑定时（一上来）*!/
        bind(element,binding){
            element.value = binding.value
        },
        /!*指令所在元素被插入页面时*!/
        inserted(element,binding){
            element.focus()
        },
        /!*指令所在的模板被重新解析时*!/
        update(element,binding){
            element.value = binding.value
        }
    })
    */
    new Vue({
        el:'#root',
        data:{
            n:1
        },
        //局部自定义指令
        directives:{
            /*big函数何时会被调用？1.指令与元素成立绑定时（一上来）。2，指令所在的模板被重新解析时*/
            big(el,big){
                el.innerText = big.value * 10
            },
            /*'big-number'(element,binding){
                element.innerText = binding.value * 10
            },*/
            fbind:{
                // 指令与元素成功绑定时(页面一上来就触发，只触发一次)
                bind(element,binding){
                    console.log(this)//this指向是window
                    element.value = binding.value  
                },
                 // 指令所在元素被插入页面时，只触发一次
                inserted(element,binding){
                    element.focus()  //重新再次聚焦
                },
                /*指令所在的模板被重新解析时*/
                update(element,binding){
                    element.value = binding.value
                }
            }
        }
    })
</script>

以上是自定义指令总结！！！多看不如多练~