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 是指令定义对象中的钩子函数。该钩子函数表示，当被绑定元素插入父节点时，使元素自动获得焦点。在注册全局指令后，在被绑定元素中应用该指令即可实现相应的功能。运行结果如下图所示：

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。在为自定义指令命名时建议采用这种方式。运行结果如下图所示：

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

3、钩子函数

3.1 何为钩子函数

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

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

3.2 常见的钩子函数

1、在注册指令时，可以传入 definition 定义对象，对指令赋予一些特殊的功能。一个指令定义对象可以提供如下几种类型的钩子函数。

上述的钩子函数都是可选的。每个钩子函数都可以传入 el、binding 和 vnode 3个参数， componentUpdated 和update 钩子函数还可以传入 oldVnode 参数。这些参数的说明如下：

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

2、binding 参数对象包含的属性

• 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>

运行结果如下图所示：

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>

运行结果如下图所示：

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>

运行结果如下所示：

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