Vue 基础语法之自定义指令

1、注册全局指令

虽然 Vue 提供了很多内置指令可以实现动态数据渲染(v-model)、事件绑定(v-on)、流程控制(v-if/v-for)等，但是在实际开发过程中，如果遇到经常发生的功能场景，可以自己注册一个全局指令或在当前组件中组成一个自定义指令。

基础语法

Vue 提供的全局 API 中一个用于注册全局指令的方法 Vue.driective() ，通过这个方法可以注册全局使用的自定义指令，语法如下：

Vue.directive('name', {
  inserted: function (el) {
    // ...
  }
})

Vue.directive(name, options) 全局函数有两个参数，第一个参数是自定义指令的名字，第二个参数是配置项对象（或函数），配置对象中可以定义一些钩子函数，示例代码如下：

Vue.directive('directiveName', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

钩子函数

这些钩子函数会在指定的时机被自定调用，具体执行时机包括：

• bind()：当指令第一次绑定到元素时被调用，并且只会被调用一次，一般用于初始化配置；
• inserted()：当绑定的元素被插入到父元素时被调用；
• update()：当绑定的组件被更新时调用，但会在其子组件更新之前被调用；
• componentUpdated()：当绑定的组件及其子组件全部更新之后被调用；
• unbind()：当指令和绑定的元素解绑时被调用，并且只会被调用一次；

在 Vue.directive() 的第二个配置项参数中可以声明一个或多个钩子函数，这些钩子函数会在不同的时机被执行，这些钩子函数中都有相同的参数，这些参数被称为“钩子函数参数”。

钩子函数参数包括：

• el：被绑定的元素 DOM 对象，与 Document.getElementById('') 获取到的 DOM 对象是一样的；
• binding：与指令信息相关的对象；
• vnode：Vue 编译生成的虚拟节点；
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

自定义指令案例

如果想设计一个指令，只要绑定了该指令的元素，其内部的文本节点样式都改为红色。注册全局指令的示例代码如下：

<div id="app">
	<p v-red>{{msg}}</p>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	Vue.directive('red', {
		inserted(el) {
			el.style.color = 'red'
		}
	})

	new Vue({
		el: '#app',
		data: {
			msg: 'hello'
		}
	})
</script>

在浏览器中运行的效果如下：

我们再来升级一下自定义指令的功能，如果要定义一个修改颜色的指令，通过指令绑定的值来设置元素的文本节点颜色。示例代码如下：

<div id="app">
	<p v-color="styleColor">{{msg}}</p>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	Vue.directive('color', {
		inserted(el,binding) {
			el.style.color = binding.value
		}
	})

	new Vue({
		el: '#app',
		data: {
			msg: 'hello',
			styleColor: '#37f'
		}
	})
</script>

在浏览器中运行的效果如下：

上面案例中使用的自定义指令的钩子函数是 inserted ，我们也可以使用其他的钩子函数完成上面的案例，很多时候为了简化代码，可能不太考虑使用哪个钩子函数，如果想在 bind 和 update 时触发相同的功能，可以使用函数简写的方式。示例代码如下：

Vue.directive('color', function(el, binding) {
	// ...
})

2、注册局部指令

Vue 的全局 API 函数注册的指令可以被当前项目中所有的组件所使用，如果只想为一个组件注册自定义指令的话，可以在 Vue 实例对象中注册自定义指令。

我们还以上面的案例为示例，如果要在 Vue 实例组件中注册，代码如下：

<div id="app">
	<p v-color="styleColor">{{msg}}</p>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			msg: 'hello',
			styleColor: '#f56'
		},
		directives: {
			color: {
				inserted(el, binding) {
					el.style.color = binding.value
				}
			}
		}
	})
</script>

在浏览器中运行的效果如下：