46. vue自定义指令
在Vue中，我们可以使用Vue.directive方法创建自定义指令，并在需要时在模板中使用这些指令。
下面是一个简单的自定义指令示例：
// 注册一个全局自定义指令 `v-uppercase`
Vue.directive('uppercase', {
// 当被绑定的元素插入到 DOM 中时
inserted: function (el) {
el.textContent = el.textContent.toUpperCase()
}
})
在上面的示例中，我们使用Vue.directive方法创建了一个名为v-uppercase的自定义指令，并在定义对象中添加了一个inserted钩子函数。当指令应用于一个元素时，这个钩子函数将被调用。在这个例子中，我们在这个钩子函数中将元素的文本内容转换成大写字母。
接下来，我们可以在模板中使用v-uppercase指令来应用这个自定义指令：
<p v-uppercase>This text will be transformed to uppercase.</p>
在上面的示例中，我们将v-uppercase指令应用到了一个<p>元素上，这样当这个元素被插入到DOM中时，自定义指令中的inserted函数将被调用，并将元素的文本内容转换成大写字母。
除了inserted钩子函数外，自定义指令还可以包含其他钩子函数，比如bind、update、componentUpdated和unbind等，这些钩子函数可以用于在不同的生命周期阶段对指令进行操作。
自定义指令可以在组件内部和全局范围内进行注册。要在组件内部注册指令，可以在组件定义中添加directives属性，如下所示：
Vue.component('my-component', {
directives: {
// 注册一个局部自定义指令 `v-focus`
focus: {
// 指令定义
inserted: function (el) {
el.focus()
}
}
},
template: '<input v-focus>'
})
在上面的示例中，我们在组件定义中添加了一个directives属性，并在这个属性中注册了一个名为v-focus的局部自定义指令。在模板中，我们将这个指令应用到一个<input>元素上，这样当这个元素被插入到DOM中时，自定义指令中的inserted函数将被调用，并将元素设置为聚焦状态。
需要注意的是，指令钩子函数中的this上下文指向的是当前指令的实例对象，可以在钩子函数中通过this访问指令的一些属性和方法。
