11-VUE的自定义指令

11-自定义指令

---

​ VUE中除了有内置指令还支持自定义指令

1.自定义指令——函数式

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

<div id="root">
    <h3>n的值为：<span v-text="n"></span></h3>
    <!--将自定义指令v-big绑定在span元素上-->
    <h3>n的值放大十倍为：<span v-big="n"></span></h3>
    <button @click="n++">点我n+1</button>
</div>

想要自定义指令，我们就需要VUE中的一个directives属性

new Vue({
        el:'#root',
        data:{
            n:1,
        },
        directives:{
            big(){
                console.log("big");
            },
        },
    })

将自定义指令的基础设置好后，自定义指令的函数会带有两个形参，一个为所影响的DOM元素，一个为所绑定的数据

directives:{
    // 函数式
    big(element,binding){
       	// big函数何时会被调用？1.指令与元素成功绑定时（一上来）,2.指令所在的模板被重新解析时。
        console.log("big");
        console.log(element);
        console.log(binding);
        console.log(binding.value);
        console.log(element instanceof HTMLElement);//判断a是不是真实DOM
    },
},

知道这个之后就可以实现我们需要的指令效果

directives:{
    big(element,binding){
        element.innerText=binding.value*10;
    },
},

---

2.自定义指令——对象式

定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input.元素默认获取焦点。

<div id="root">
    <input type="text" v-fbind:value="n">
    <button @click="n++">点我n+1</button>
</div>

对于这个需求我们不能使用函数式的自定义指令的定义方式，我们需要使用对象式完成

directives:{
    fbind:{
        // 指令与元素成功绑定时（一上来）
        bind(element,binding){
            element.value=binding.value;
            console.log("bind");
        },
        // 指令所在元素被插入页面中时
        inserted(element,binding){
            element.focus();
            console.log("inserted");
        },
        // 指令所在的模板被重新解析时
        update(element,binding){
            element.value=binding.value;
            element.focus();
            console.log("update");
        },
    },
},

---

3.自定义指令——总结

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

new Vue({                                               
    directives:{指令名:配置对象}      
})               

new Vue({
    directives(){指令名:回调函数
})

(2).全局指令：

Vue.directive(指令名,配置对象) 

Vue.directive(指令名，回调函数)

二、配置对象中常用的3个回调：
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-,但使用时要加v-。
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
(3).update:指令所在模板结构被重新解析时调用。
三、备注：
1.指令定义时不加v-,但使用时要加v-。
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。