Vue之自定义指令（对象式）

<div id="root">
        <button @click="n++">点击进行自增</button>
        <input type="text" v-fbind:value="n">
        <!-- 自定义的一个fbind指令名 ，注意必须是小写-->
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                n:1,
            },
            directives:{
                //directives 里面可以存放自定义指令名
               
                //对象式写法，可以分步写
                fbind:{
                    //指令与元素绑定的时候（一上来时候）
                    bind(element,binding){
                        element.value = bingding.value;
                    },
                    //指令所在元素插入页面的时候
                    inserted(element,binding){
                        element.focus()//获取焦点
                    },
                    //指令所在模板被重新解析时候（data数据发生改变，则会重新解析）
                    update(element,binding){
                        element.value = binding.value;
                    }
                }
            }
        })
    </script>

注意directives里面用对象式写法，那么this将会指向window，因为你所需要的数据，可以通过bingding.value 将data里的数据拿到。