8.Vue.js前端框架:自定义指令

1、为什么要定义自定义指令

在学习了 Vue 前端框架之后,我们也认识了许多的内置指令,比如,v-for 指令、v-if 指令、v-bind 指令、v-model 指令等等。但是由于这些内置指令都偏向于工具化,而在有些时候需要去实现具体的业务逻辑时,应用这些内置指令并不能实现某些特定的功能。对此,Vue.js 允许了用户自定义指令,以便于对 DOM 元素的重复处理,从而提高代码的复用性。自定义指令就是在满足内置指令特定条件的前提下用户注册的指令,就如同 C 中的用户自定义函数一样,创建用户自定义函数的同时需要满足某些特定的条件,否则就会出现错误。

2、注册自定义指令

Vue.js 提供了可以注册自定义指令的方法,通过不同的方法可以注册全局自定义指令和局部自定义指令。

2.1 注册全局自定义指令

通过 Vue.directive(id,definition) 方法可以注册一个全局自定义指令。该方法可以接收两个参数:指令 ID 和定义对象。指令 ID 是指令的唯一标识,定义对象是定义的指令的钩子函数。例如,注册一个全局自定义指令,通过该指令实现当页面加载时,使元素自动获得焦点。代码如下:

<div id="box">
			<input v-focus>
		div>
		   <script type="text/javascript">
			   Vue.directive('focus',{
      
				   //当被绑定的元素插入DOM中执行
				   inserted:function(e1){
      
					   //使元素获得焦点
					   e1.focus();
				   }
			   })
				var vm = new Vue({
      
					el : '#box'
				});
			script>

在上述代码中,focus 是自定义指令 ID,不包括 v-前缀,inserted 是指令定义对象中的钩子函数。该钩子函数表示,当被绑定元素插入父节点时,使元素自动获得焦点。在注册全局指令后,在被绑定元素中应用该指令即可实现相应的功能。运行结果如下图所示:
8.Vue.js前端框架:自定义指令_第1张图片

2.2 注册局部自定义指令

通过 Vue 实例中的 directives 选项可以注册一个局部自定义指令。例如,注册一个局部自定义指令,通过该指令实现为元素添加边框的功能。代码如下:

<div id="box">
			<span v-add-border="border">你好,晓茗span>
		div>
		   <script type="text/javascript">
				var vm = new Vue({
      
					el : '#box',
					data:{
      
						border:'1px solid #aaffff'
					},
					directives:{
      
						addBorder:{
      
							inserted:function(e1,binding){
      
								e1.style.border=binding.value;
							}
						}
					}
				});
			script>

在上述代码中,在注册局部自定义指令时采用了小驼峰命名的方式,将自定义指令 ID 定义为 addBorder,而在元素中应用指令时的写法为 v-add-border。在为自定义指令命名时建议采用这种方式。运行结果如下图所示:
8.Vue.js前端框架:自定义指令_第2张图片

注意:局部自定义指令只能在当前实例中进行调用,而无法在其他实例中调用。就如同 C 中的局部变量,只能在当前函数下进行使用,在其他函数下无法使用。

3、钩子函数

3.1 何为钩子函数

1、钩子函数:钩子函数是在一个事件触发的时候,在系统中捕获到它,然后做一些操作。是一段用于处理系统消息的程序。“钩子”这个意思就是在某个阶段给你一个做某些处理的机会。

钩子函数是一个函数,在系统消息触发时被系统调用;不是用户自己触发的。

3.2 常见的钩子函数

1、在注册指令时,可以传入 definition 定义对象,对指令赋予一些特殊的功能。一个指令定义对象可以提供如下几种类型的钩子函数。
8.Vue.js前端框架:自定义指令_第3张图片
上述的钩子函数都是可选的。每个钩子函数都可以传入 el、binding 和 vnode 3个参数, componentUpdated 和update 钩子函数还可以传入 oldVnode 参数。这些参数的说明如下:

  • el :指令所绑定的元素,可以用来直接操作 DOM
  • binding :一个对象,包含很多属性。

2、binding 参数对象包含的属性
8.Vue.js前端框架:自定义指令_第4张图片

  • vnode :Vue 编译生成的虚拟结点
  • oldVnode :上一个虚拟节点,仅在 componentUpdated 和 update 钩子函数中可用

除 el 参数之外,其他参数都应该是只读的,切勿进行修改

4、自定义指令的绑定值

自定义指令的绑定值除了可以是 data 中的属性之外,还可以是任意合法的 JavaScrit 表达式。例如,数值常量、字符串常量、对象字面量等。

4.1 绑定数值常量

注册一个自定义指令,通过该指令设置定位元素的左侧位置,将该指令的绑定值设置为一个数值,该数值即为被绑定元素到页面左侧的距离。代码如下:

<div id="box">
			<p v-set-postion="100">越努力越幸运p>
		div>
		   <script type="text/javascript">
			   Vue.directive('set-postion',function(el,binding){
      
				   el.style.position='fixed';
				   el.style.left=binding.value+'px';
			   })
				var vm = new Vue({
      
					el : '#box'
				})
			script>

运行结果如下图所示:
8.Vue.js前端框架:自定义指令_第5张图片

4.2 绑定字符串常量

将自定义指令的绑定值设置为字符串常量需要使用单引号。例如,注册一个自定义指令,通过该指令设置文本颜色,将该指令的绑定值设置为字符串 ’0000FF‘,该字符串即为被绑定元素设置的颜色。示例代码如下:

<div id="box">
			<p v-set-color="'#0000FF'">越努力越幸运p>
		div>
		   <script type="text/javascript">
			   Vue.directive('set-color',function(el,binding){
      
				   el.style.color=binding.value;//设置文本颜色
			   })
				var vm = new Vue({
      
					el : '#box'
				})
			script>

运行结果如下图所示:
8.Vue.js前端框架:自定义指令_第6张图片

4.3 绑定对象字面量

如果指令需要多个值,可以传入一个 JavaScript 对象字面量。注意,此时对象字面量不需要使用单引号引起来。例如,注册一个自定义指令,通过该指令设置文本的大小和颜色,将该指令的绑定值设置为对象字面量。代码如下:

<div id="box">
			<p v-set-style="{
        size :117,color :'green'}">越努力越幸运p>
		div>
		   <script type="text/javascript">
			   Vue.directive('set-style',function(el,binding){
      
				   el.style.fontSize=binding.value.size;//设置字体大小
				   el.style.color=binding.value.color;//设置字体颜色
			   })
				var vm = new Vue({
      
					el : '#box'
				})
			script>

运行结果如下所示:
8.Vue.js前端框架:自定义指令_第7张图片

备注:后期会继续跟进 Vue.js前端框架:组件,希望大家的多多支持和关注。

你可能感兴趣的:(Vue.js入门知识,vue,javascript,html,前端,经验分享)