Vue技术—自定义指令

自定义指令总结

一、定义语法：

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

2、全局指令：
Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)

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

三、备注
1、指令定义时不加v-，但使用时要加v-
2、指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

<div id="root">
    <h2>当前n的值时：{{n}}</h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<!--    <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>-->
    <button @click='n++'>点我n+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(element,binding){
                element.innerText = binding.value * 10
            },
            /*'big-number'(element,binding){
                element.innerText = binding.value * 10
            },*/
            fbind:{
                /*指令与元素成立绑定时（一上来）*/
                bind(element,binding){
                    element.value = binding.value
                },
                /*指令所在元素被插入页面时*/
                inserted(element,binding){
                    element.focus()
                },
                /*指令所在的模板被重新解析时*/
                update(element,binding){
                    element.value = binding.value
                }
            }
        }
    })
</script>