自定义指令

除了Vue核心的内置指令(例如:v-model 和 v-show等)以外,Vue也允许自己定义指令。虽然Vue是避免我们操作DOM元素的,但是,在有的情况下,我们需要对DOM元素进行底层操作,这个时候我们就会用到自定义指令。


Vue全局自定义指令

接下来用自动获取焦点这个小例子,来介绍一下全局自定义指令。

注意:Vue.directive(‘参数名称’,{}) 定义全局指令,它有两个参数

  • 参数1:指令名称,注意在定义的时候,指令名称前不需要加 v- 前缀,但是在调用的时候,必须加v- 前缀。
  • 参数2:参数2是一个对象,这个对象身上有一些指令相关的函数(也就是下边介绍的钩子函数)这些函数可以在特定的阶段,执行相关操作。
<div id="app">
	<input type="text" v-focus>
</div>

<script>
	//这里就用到上边所说的钩子函数了,在这里不做详解,在下面的钩子函数以及传参做详解
	Vue.directive('focus',{
		bind:function(){//每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次
		
		},
		inserted:function(el){// inserted 表示元素 插入到DOM中的时候,会执行此函数,触发一次
			el.focus(); //注意:在每一个函数中,第一个参数,永远是 el ,表示被绑定了指令的 那个元素 ,这个el参数,是一个原生JS的DOM对象
		},
		updated:function(){// 每当VNode 更新的时候,会执行 updated函数,可能会触发多次
		
		}
	})

	var vm = new Vue({
		el:'#app',
		data:{},
		methods:{}
	})
</script>


Vue局部自定义指令

局部自定义指令,其实和全局自定义指令差不多,原理都是一样,接来下用给字体设置样式例子,来介绍局部自定义指令

注意:局部自定义指令 有两个条件【指令名称 和 指令对象】

<div id="app>
	<h5 v-color>我是局部自定义指令</h5>
</div>

<script>
	var vm = new Vue({
		el:'#app',
		date:{},
		methods:{},
		directives:{
			'color':{//给字体设置颜色
				bind:function(el){ //这个function() 中还有第二个参数 binding ,这里不做介绍,在下边钩子函数参数中介绍
					el.style.color="red";
				}
			}
		}
	})
</script>

注:全局用的是 directive,局部用的是directives


Vue钩子函数

在定义全局指令的时候,就说Vue.directive('指令名称',{}) 有两个参数,那么 钩子函数 就是用在第二个参数对象中的。

一个指令对象可以提供以下钩子函数(前三个是常用的)

  • bind :只调用一次,每当指令绑定到元素上的时候,会立即执行这个 bind 函数。

    1. 在上边自动获取焦点的案例中,在元素 刚绑定指令的时候,还没有插入到 DOM 中去,这个时候调用 focus 方法没有作用因为一个元素,只有插入DOM之后,才能获取焦点,所以这个函数不能获取焦点
    2. 样式设置;只要通过指令绑定给了元素,不管这个元素有没有插入到页面中,这个元素肯定有一个内联样式,将来元素肯定会渲染显示到页面中去,这个时候,浏览器的渲染引擎必然会解析样式,然后应用这个样式。

    注:一般和样式操作有关的,一般都可以在 bind 函数中执行

  • inserted : 表示元素 插入到DOM中的时候,会执行 inserted 函数,触发一次。(例如:自动获取焦点)
    注:和 JS 行为有关系的操作,最好在 inserted 中去执行,防止 JS 行为不生效。

  • updated : 当VNode 更新的时候,会执行 updated 函数,可能会触发多次


  • componentUpdated : 指令所在组件的VNode 及其子 VNode 全部更新后调用。
  • upbind: 只调用一次,指令与元素解绑时调用。

Vue钩子函数传参数详解

上边也有介绍,钩子函数有四个参数。一个是指令所绑定的元素,用来直接操作DOM;另外一个是一个对象,它包含一些属性。另外两个了解。
通过一些例子来了解一下:

  • el : 指令所绑定的元素,规定的也是每个钩子函数中的第一个参数,永远不会改变,这个 el 参数,是一个原生的JS 的 DOM对象
  • binding: 第二个参数是一个对象,它包含一些属性(前三个常用,但是其他的也要知道)
    1. name:指令名,不包括 v- 前缀。
    2. value: 指令绑定的值,例如:v-count="1 + 1"中,绑定值为 2
    3. expression: 字符串形式的指令表达式。例如:v-count="1 + 1"中,表达式为 1 + 1

    1. oldValue: 指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    2. arg: 传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    3. modifiers: 一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为{ foo: true, bar: true }
  • vnode: Vue 编译生成的虚拟节点。
  • oldVnode: 上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用

注:除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

<div id="app">
	//注意:v-color=" 'yellow' "  里边是单引号引着(因为value属性)
	<p v-color=" 'yellow' " v-fontsize=" '50px' ">钩子函数的传参</p>
</div>

<script>
	//全局自定义指令写法
	Vue.directive('color',{
		bind:function(el,binding){
			el.style.color=binding.value;
		}
	})


	//局部自定义指令写法
	var vm = new Vue({
		el:'#app',
		data:{},
		methods:{},
		directives:{
			'fontsize':{//设置字体大小
				bind:function(el,binding){
					el.style.fontSize=binding.value;
					
					//增强代码健壮性的一种写法(不管给指令赋值带不带 px ,都会先转化为整数)
					//el.style.fontSize = parseInt(binding.value) + 'px'
				}
			}
		}
	})

</script>

注:钩子函数中的参数,不是一定起名是 el 或者 binding 的,一定要明白原理,他们只不过是形参而已,名字可以不一样,但是他们代表的含义是Vue内部规定好的!


钩子函数简写或者合并

在有的时候,可能bindupdate触发相同行为,不关其他钩子函数的事。

<div id="app">
	<p v-fontsize=" '50px' ">钩子函数的传参</p>
</div>

<script>
	var vm = new Vue({
		el:'#app',
		data:{},
		methods:{},
		directives:{
			'fontsize':function(el,binding){ //注意:这个 function 等同于把代码写到了 bind 和 update 中去
				el.style.fontSize=binding.value;
			}
		}
	
	})

</script>
Logo

前往低代码交流专区

更多推荐