VUE2 自定义指令

简写方式（有弊端）

<h2>{{name}}</h2>
<h2>当前的n值是：{{n}} </h2>
<h2 v-big="n">放大10倍后的n值是：{{n}} </h2>
<button @click="n++"> </button>

data(){
    return{
        name: "张三"
        n: 1
    }
},
directives:{
    //自定义指令被调用的时机：
    //1. 指令与元素成功绑定时（即一开始）
    //2. 指令所在的模板被重新解析时（即如果这里的“name”发生改变，自定义指令也会被调用）
    big(element, binding){
        //console.dir(element)                  //这里可以输出element在控制台中查看其属性和方法，上面的v-big所在的<h2>标签就是真实的DOM
        //console.log(element instanceof HTML)  //输出结果为true，也表示上面的v-big所在的<h2>标签就是真实的DOM
        //console.log(binding)                  //这里可以输出看下其身上的对象，这个v-big是绑定在第二个<h2>标签上的
        //console.log(this)                     //这里的this是window
        element.innerText = binding.value * 10  //其本质就是操作DOM元素，这里就是实现其放大10倍的功能
    }
}

完整写法

自定义指令的生命周期钩子 bind()、inserted()、updata()

<input type="text" v-fbind:value="n" />
<script>
    directives:{
        fbind:{
            //指令与元素成功绑定时（即一开始）
            bind(element, binding){
                element.value = binding.value
                //console.log(this)            //这里的this是window
            },
            //指令所在元素被插入页面时
            inserted(element, binding){
                element.focus()
                //console.log(this)            //这里的this是window
            },
            //指令所在的模板被重新解析时
            update(element, binding){
                element.value = binding.value
                //console.log(this)           //这里的this是window
            }
        }
    }
</script>

自定义指令语法规范

<span v-big-number="n"></span>   <!-- 如果出现两个英文单词时的写法 -->
<script>
    directives:{
        'big-number':function(element, binding){}
   //或 'big-number':(element, binding){}
    }
</script>

全局自定义指令

// 注意：全局要用 directive，而局部要用 directives
Vue.directive('big',function(){element, binding})    // 回调函数式写法
Vue.directive('fbind',{                              // 配置对象写法（完整写法）
    bind(element, binding){},
    inserted(element, binding){},
    update(element, binding){}
})