自定义指令

1.语法：

（1） 局部指令：

​ directives:{指令名：配置对象}或 directives：{指令名:回调函数}

（2）全局指令：

Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)

2.配置对象中常用的回调

created：在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加在普通的 v-on 事件监听器调用前的事件监听器中时，这很有用。`

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。mounted：指令与元素成功绑定时使用

updated:在包含组件的 VNode 及其子组件的 VNode 更新后调用。

beforeUpdate：在更新包含组件的 VNode 之前调用。

beforeUnmount：在卸载绑定元素的父组件之前调用

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

PS:指令定义时不加v-,，但是使用时要加v-

指令名如果是多个单词要用kebab-case命名方式，不要用camelCase命名

 <div id="root">
        <h3>{{name}}</h3>
        <h3>当前n:<span v-text="n">{{n}}</span></h3>
        <h3>放大10倍后的n：<span v-big="n">{{n}}</span></h3>
        <button @click="n++">点我n+1</button>
        <br>
        <input type="text" v-fbind:value="n">
 </div>
<script src="https://unpkg.com/vue@next"></script>
    <script>
        Vue.createApp({
            data(){
                return{
                    name:"ann",
                    n:1
                }
            },
            directives: {
                //v-big被调用：指令与元素成功绑定时（一上来） 指令所在模板重新编译时
                big(element,binding){
                   element.innerText=binding.value*10
                   
                },
               /*fbind(element,binding){
                    element.value=binding.value
                    element.focus()
                },*/
               fbind:{
                   // 当被绑定的元素挂载到 DOM 中时……
                    mounted(element,binding){
                        console.log(this)
                        element.value=binding.value
                        element.focus()

                    },
                    updated(element,binding){
                        element.value=binding.value

                    }

                }
                

            }
        }).mount("#root")

    </script>