0
点赞
收藏
分享

微信扫一扫

VUE——自定义指令

颜娘娘的碎碎念 2022-04-13 阅读 138

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
}

举报

相关推荐

VUE自定义指令

Vue 自定义指令

vue自定义指令

Vue自定义指令

【Vue】自定义指令

15 Vue自定义指令

Vue之自定义指令

0 条评论