Vue-自定义指令

1.格式

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

在与data同级层定义directives，并在其中定义指令

一个完整的指令包含bind、inserted、update三个钩子函数

bind:指令与元素成功绑定时执行

inserted:指令所在元素被插入页面时

update:指令所在模板被重新解析时

           fbind:{
                //指令与元素成功绑定时
                bind(element,binding){
                    console.log("bind");
                },
                //指令所在元素被插入页面时
                inserted(element,binding){

                    console.log("inserted");
                },
                //指令所在模板被重新解析时
                update(element,binding){
                    console.log("update");
                }
            }

2.举例

1.案例一

定义一个v-big指令，和v-text功能类似，但要求吧绑定的数值放大十倍

 <div id="app">
        <h2 >当前的n的值是: <span v-text="n"></span> </h2>
        <h2>放大十倍后的的n的值是: <span v-big="n"></span></h2>
        <button @click = "n++">点击使n++</button>
    </div>

const vm =new Vue({
        el:'#app',
        data:{
            n:1
        },
        directives:{
            big(element,binding){
                element.innerText =binding.value*10
                console.log(element,binding)
            },
        }
    })

当不需要对数据进行精细处理时，我们自定义组件可以使用简写，以上为

 big(element,binding){
                element.innerText =binding.value*10
                console.log(element,binding)
            }

简写会跳过inserted钩子函数，只执行bind和update函数

2.案例二

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

<div id="app">
        <h2 >当前的n的值是: <span v-text="n"></span> </h2>
        <h2>放大十倍后的的n的值是: <span v-big="n"></span></h2>
        <button @click = "n++">点击使n++</button>
        <input type="text" v-fbind:value="n">
    </div>

 const vm =new Vue({
        el:'#app',
        data:{
            n:1
        },
        directives:{
            big(element,binding){
                element.innerText =binding.value*10
                console.log(element,binding)
            },
            fbind:{
                //指令与元素成功绑定时
                bind(element,binding){
                    element.value =binding.value*10
                    console.log("bind");
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    element.focus()
                    console.log("inserted");
                },
                //指令所在模板被重新解析时
                update(element,binding){
                    console.log("update");
                    element.value =binding.value*10
                    // element.focus()
                }
            }
        }
    })

当我们需要获取输入框的焦点时，我们需要在指令所在元素被插入页面时进行操作，需要inserted钩子函数，所以我们不能简写