VUE之自定义指令

---

前言

自定义指令分为两种：全局定义和私有定义。

---

一、自定义指令是什么？

在构建项目过程中，虽然我们都是使用的组件形式，但是在某些情况下，我们仍然需要对普通DOM元素进行底层操作，这个时候就会用到自定义指令。

二、使用步骤

在全局定义中，需要注意的是：第一个参数，定义时不加v-，但使用时加v-。

1.全局定义

html代码

<div id='app'>
	<div v-color="color">今天心情真好</div>
	<div v-color="'red'">今天心情真好</div>
</div>

js代码

Vue.directive('color', {
	// bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
	// el:当前的DOM元素
	bind(el, binding) {
		console.log(el);
    	console.log(binding);
		el.style.color = binding.value
	}
})
//实例化Vue
const vm = new Vue({
	el: '#app',
	data: {
		color: 'green',
		value: ''
	},
	methods: {
	}
})

2.私有定义

实例化Vue中有个directives属性，私有定义可以在该属性下声明私有自定义指令。
html代码

<div id='app'>
	<input type="text" v-color v-model="value" v-focus>
	<input type="text" v-color v-model="value" v-focus>
</div>

js代码

const vm = new Vue({
	el: '#app',
	data: {
		color: 'green',
		value: ''
	},
	methods: {
	},
	// 私有定义
	directives: {
		// color 自定义指令名字
		color(el, binding) {
			console.log(el);
			console.log(binding);
			el.focus()
		},
		focus: {
			bind() {
			},
			inserted(el) {
				el.focus()
			},
			update() {

			}
		}
	}
})

三、第二个参数

1.bind函数

只调用一次，指令第一次绑定到元素调用。在这里可以进行一次性的初始化设置。
a、 el：当前的元素
b、 binding：一个对象，包含以下属性：
第一个：name，指令名，不包括v-前缀。
第二个：value，指令的绑定值。
c、 oldvalue：指令绑定的前一个值，仅在update和componentUpdated中可用。无论值是否改变都可以用。

Vue.directive('color', {
	bind(el, binding) {
		el.style.color = binding.value
	}
})

2.inserted函数

这个元素已经渲染到页面上之后执行。

Vue.directive('color', {
	bind(el, binding) {
		el.style.color = binding.value
	}，
	inserted(el) {
		// console.log(el);
		el.focus()
	}
})

3.update函数

当元素有更新的时候执行。

Vue.directive('color', {
	bind(el, binding) {
		el.style.color = binding.value
	}，
	inserted(el) {
		// console.log(el);
		el.focus()
	},
	update(el,binding){
		el.style.color=binding.value
	}
})

---

总结

以上就是今天要讲的内容。