Vue自定义指令

一、定义语法：

(1).局部指令：

new Vue({

directives:{指令名:配置对象}

})；

new Vue({

 directives{指令名:回调函数}

})

directives:{
                    big(element,binding){
					console.log('big',this) //注意此处的this是window
					element.innerText = binding.value * 10
				},

(2).全局指令：

Vue.directive(指令名,配置对象) ；

Vue.directive(指令名,回调函数)

 Vue.directive('fbind',{
			//指令与元素成功绑定
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

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

         (1).bind：指令与元素成功绑定时调用。

         (2).inserted：指令所在元素被插入页面时调用。

         (3).update：指令所在模板结构被重新解析时调用。

三、备注：

        ①指令定义时可以不加v-，但使用时要加v-；

        ②指令名如果是多个单词，要使用kebab-case（断线链接命名法）命名方式，不要用                          camelCase（驼峰命名法）命名。