VUE 自定义指令详解（五个钩子函数及参数的剖析）_vue中自定义指令有哪些钩子-优快云博客

本文链接：https://blog.youkuaiyun.com/gebieren/article/details/106697187

本文介绍了Vue中自定义指令的使用，特别是v-focus和v-color两个实例，用于实现自动获取焦点和设置字体颜色。文章详细讲解了自定义指令的五个钩子函数：bind、inserted、update、componentUpdated、unbind，并阐述了这些钩子在不同阶段的调用时机。同时，还解析了自定义指令参数的作用，包括el、binding、name、oldValue、expression和modifiers。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 中提供了14个比较常用的指令，如v-text、v-html、v-on、v-model等，而在实际的开发过程中，对于表单元素获取焦点也会常用到，而autofucos属性在vue中是失效的（移动端的Safarit也会失效），那如何来实现这个效果，这个时候就需要用到自定义的指令了。

下面就简单两个例子v-focus(获取焦点）、v-color(设置字体颜色）：

<body>
		<div id="app">
			<h2 v-color>{{msg}}</h2>
			<input type="text" v-focus />
		</div>
		<script src="vue.js"></script>
		<script>
			//注册一个全局自定义指令 `v-focus`
			Vue.directive("focus", {
				inserted(el) {
					el.focus();
				},
			});
			//注册一个全局自定义指令 `v-color`
			Vue.directive("color", {
				bind(el) {
					el.style.color = "red";
				},
			});
			const vm = new Vue({
				el: "#app",
				data: {
					msg: "自定义指令",
				},
			});
		</script>
	</body>

效果如下：