本文介绍下Vue如何自定义全局指令与局部自定义指令directive的具体用法和实现。
一、钩子函数
先来看一个场景，有一个input框，我们想让页面加载完成后，给输入框自动获得焦点，那应该怎么做呢？
其实很简单，现在让我们用全局自定义指令来实现这个功能：
<body>
<div id="app">
<input v-focus />
</div>
<script>
// 注册一个全局自定义指令 `v-focus`
//参数1：指令的名称，在调用的时候，必须在指令名称前添加"v-"
//参数2：是一个对象，包含指令相关的函数
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时调用
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
var vm = new Vue({
el: '#app',
data: {
},
})
</script>
</body>
我们先用 Vue.directive('focus', {...}) 注册一个全局自定义指令，然后给input框添加 <input v-focus />，即可实现自动获得焦点。
注意：指令名称不能包含大写字母！
我们也可以用局部自定义指令来实现上述功能：
<body>
<div id="app">
<input v-focus />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
// 注册一个局部自定义指令 `v-focus`
directives: {
focus: {
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
</body>
上面例子中，inserted 就是一个钩子函数。一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
1、bind：只调用一次，指令第一次绑定到元素时调用。和样式相关的操作可以用 bind。
2、inserted：元素插入父节点时调用。和js行为有关的操作，最好用 inserted。
3、update：更新时调用。
4、componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5、unbind：只调用一次，指令与元素解绑时调用。
二、钩子函数的参数
下面再来写个例子，实现输入框输入的颜色值是红色的：
<body>
<div id="app">
<input v-color />
</div>
<script>
Vue.directive('color', {
bind: function (el) {
el.style.color='red';
}
})
var vm = new Vue({
el: '#app',
data: {
},
})
</script>
</body>
1、如果想给v-color传参的方式设置颜色，可以改成下面这样：
<body>
<div id="app">
<input v-color="'blue'" />
</div>
<script>
Vue.directive('color', {
bind: function (el, binding) {
el.style.color = binding.value;
}
})
var vm = new Vue({
el: '#app',
data: {
},
})
</script>
</body>
注意：上面的blue一定要单引号再包一层，不然它就会取data中的blue值。传参通过 binding.value 来获取值。
指令钩子函数会被传入以下参数：
A、el ：指令所绑定的元素，可以用来直接操作 DOM 。
B、binding ：一个对象，包含以下属性：name：指令名，不包括 v- 前缀。value：指令的绑定值。
2、如果指令需要传多个参数，可以传入一个 JavaScript 对象字面量。
<div v-demo="{ color: 'white', text: 'hello!' }">123</div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color); // => "white"
console.log(binding.value.text); // => "hello!"
})
三、函数简写
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。所以上面的color指令可以修改成下面这种：
Vue.directive('color', function (el, binding) {
el.style.color = binding.value;
})
此时这个function 代表写到了bind 和 update 函数中去。
