vue--自定义指令写法

vue – 自定义指令写法

1.函数式

directives:{
	//自定义指令 -- 函数式
	//big函数何时会被调用？1.指令与元素成功绑定时；2.指令所在的模板被重新解析时；
	big(element,binding){
		//element是真实DOM
		//binding是元素和指令之间的关联关系
		element.innerText = binding.value * 10
	}
}

2.对象式

directives:{
	//自定义指令 -- 对象式(实现一个输入框已进入到页面就是聚焦情况)
	//force函数何时会被调用？1.指令与元素成功绑定时；2.指令所在的模板被重新解析时；
	force：{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}
}

3.注意事项

（1）指令名：如果key中出现-，就得加引号

'big-u'(element,binding){
		//element是真实DOM
		//binding是元素和指令之间的关联关系
		element.innerText = binding.value * 10
	}

（2）自定义指令相关的回调的this指向window
（3）全局的自定义指令的使用

//对象式全局引入
Vue.directive('bind',{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	})
//函数式全局引入
Vue.directive('bind1',function(element,binding){
		//element是真实DOM
		//binding是元素和指令之间的关联关系
		element.innerText = binding.value * 10
})