vue六自定义指令

---

自定义指令总结：

一、定义语法：

(1).局部指令：

对象
一般用于需要元素在插入页面时就实现一些操作(函数做不到)

 "big-number":{
                    //指定与元素绑定时
                    bind(element,binding){
                        element.value=binding.value;
                    },
                    //指定所在元素被插入页面时
                    inserted(element,binding){
                        element.focus();
                    },
                    //指令所在模板被重新解析时
                    update(element,binding){
                        element.value=binding.value;
                    },
                }			

函数
函数其实就是 bind 和 update合在一起 而没有inserted

       directives: {
                //1.指令与元素成功绑定时调用函数(一上来),
                //2.指定所在的模板被重新解析时(任意data元素发生变化)
                big(element, binding) {//element绑定的真实dom元素, binding绑定的值
                    element.innerText = binding.value * 10;
                }

(2).全局指令：

Vue.directive('fbind',{
            bind(element,binding){
                        element.value=binding.value;
                    },
                    //指定所在元素被插入页面时
                    inserted(element,binding){
                        element.focus();
                    },
                    //指令所在模板被重新解析时
                    update(element,binding){
                        element.value=binding.value;
                    },
        })
        Vue.directive('bing',function (element,binding) {
            element.innerText = binding.value * 10;
        })

注意 局部和全局的directive和directives的区别

二、配置对象中常用的3个回调：

		(1).bind：指令与元素成功绑定时调用。
		(2).inserted：指令所在元素被插入页面时调用。
		(3).update：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；
若在directives里面 直接写big 在模板里写v-big
2.指令名如果是多个单词用user-name命名方式，不要用驼峰userName命名。
注意 如果是 user-name在函数里要加’user-name’