需求：
<body> <div id="root"> <h2>当前的n的值是： <span v-text="n"></span> </h2> <h2>放大10倍后的n的值是<span v-big="n"></span></h2> <button @click="n++">点我n++</button> <hr> <input type="text" v-fbind:value="n"> </div> <script> // Vue.directive('fbind', { // bind(element, binding) { // element.value = binding.value // }, // //指令所在元素被插入页面时 // inserted(element, binding) { // element.focus(); // }, // // 指令所在的模板被重新解析时 // update(element, binding) { // element.value = binding.value // } // }) //big函数什么时候解析? // 1、指令与元素成功绑定时（一上来） //2、指令所在的模板被重新解析时 const vm = new Vue({ el: '#root', data: { n: 1 }, // 函数式 directives: { //big函数什么时候解析? // 1、指令与元素成功绑定时（一上来） //2、指令所在的模板被重新解析时 big(element, binding) { console.log('big', this) element.innerHTML = binding.value * 10; }, fbind: { //指令与元素成功绑定时 bind(element, binding) { element.value = binding.value }, //指令所在元素被插入页面时 inserted(element, binding) { element.focus(); }, // 指令所在的模板被重新解析时 update(element, binding) { element.value = binding.value } } } }) </script> </body>
配置对象中的三个回调：
