Web前端开发进阶笔记7——自定义指令_自定义指令前端怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/HAC_SOUL/article/details/117396487

本文介绍了Vue.js中自定义指令的使用，包括无参数和带参数的指令。通过示例展示了如何创建全局及局部自定义指令，如`v-autoin`和`v-autochangec`，并讲解了指令的生命周期钩子函数。在示例中，`v-autoin`用于自动聚焦输入框，`v-autochangec`则用于改变元素背景颜色。同时，文章强调了自定义指令命名规范和访问data中值的方法。

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

1.自定义指令的入门：

2.自定义带参数的指令。

下面我们来说一下注意点，并放出示例：

首先，需要注意的是钩子函数这一新定义，详见官方文档，这里我选取部分。

其次，就是自定义指令的结构了。我们需要注意一定要创建vue对象，才可以对其内部元素添加自定义指令，并且自定义指令名不可以有大写，下面请看示例：

<div id="content">
			<input type="text" :style="">
			<input type="text" v-autochangec='newcolor' v-autoin >
		</div>
		<script type="text/javascript">
			// autoin是自定义v-自定义名的名称
			Vue.directive('autoin', {
				// 内部填写方法，首先，是方法名，这里并非自定义，而是官方所提供的一些钩子函数
				inserted: function(elm) {
					// console.log(elm);
					elm.focus();
				}
			});
			Vue.directive('autochangec', {
				inserted: function(el, binding) {
					el.style.backgroundColor=binding.value;
					// console.log(binding);
				}
			});
			var vm = new Vue({
				el: '#content',
				data: {
					newcolor:'blue'
				},
				methods: {
					
				}
			})
		</script>

这一部分很重要，大家可以自己多尝试尝试。

3.上面我们使用的全局自定义指令，我们也有局部自定义指令，它是一个directive键，我们看一下写法：

directives: {
					click: {
						inserted:function(el,binding) {
							// console.log(this.value);
							el.style.backgroundColor=binding.value;
						}
					}
				}

需要注意的是，这里不可以用this.值来获取data中的值。