VUE——自定义指令

v-xxx

一、定义语法
1.局部指令

new Vue({
        directives: {
       		//方法一：
            big(element, binding) {
                element.innerText = binding.value * 10;
                console.log(binding.value);
            },
            //方法二：
            fbind: {
                // 指令与元素成功绑定时
                bind(element, binding) {
                    element.value = binding.value;
                },
                // 指令所在元素被插入页面时
                inserted(element, binding) {
                    element.value = binding.value;
                    element.focus();
                },
                // 指令所在模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                    element.focus();
                }
            }
        }
    })

2.全局指令

Vue.directive('big', function (element, binding) {
        console.log(1);
    })

Vue.directive('fbind2',{
        bind(element,binding){
            console.log(123);
        },
        inserted(element,binding){
            console.log(123);
        },
        update(element,binding){
            console.log(123);
        }
    })

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

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

<input v-fbind-num:value="n" type="text">//√
<input v-fbinNnum:value="n" type="text"> //×

//注意要用字符串的形式，没有加的是因为省略了。
'fbind-num'(element, binding) {
                element.innerText = binding.value * 10;
                console.log(binding.value);
}

3.定义的指令中的this都是windows元素，而非vm元素。
‘fbind-num’(element, binding) {
console.log(this);//这里的this是window
}