vue自定义指令

vue自定义指令

指令中this都是window

指令函数何时调用

1. 指令与元素绑定时
2. 指令所在模版dom重新解析时

实例一：定义一个v-big指令，和v-text功能类似，但能将绑定的值放大10倍

<h1 v-text="n"></h1>
<h1 v-big-number="n"></h1>

<script>
new Vue({
directives:{
	'big-number'(element, binding){
		element.innerText = binding.value * 10
	}
}
})
</script>

指令对象
实例二：定义一个v-fbind指令，和v-bind类似，但是能聚焦

<h1 v-text="n"></h1>
<input v-fbind="n"></h1>

<script>
new Vue({
directives:{
	fbind: {
		//指令与元素绑定时（绑样式、内容等等）
		bind(element, binding){
			element.innerText = binding.value
		},
		// 指令所在元素被插入页面时
		inserted(element, binding){
			element.focus()
		},
		// 指令所在模版dom重新解析时
		update(element, binding){
			element.innerText = binding.value
		}
	}
}
})
</script>

全局指令

Vue.directive('fbind', {
	//指令与元素绑定时（绑样式、内容等等）
	bind(element, binding){
		element.innerText = binding.value
	},
	// 指令所在元素被插入页面时
	inserted(element, binding){
		element.focus()
	},
	// 指令所在模版dom重新解析时
	update(element, binding){
		element.innerText = binding.value
	}
})