1. vue 自定义指令
在Vue.js中，你可以创建自定义指令（Custom Directive）来封装可重用的DOM操作。
Vue提供了一种机制来扩展其内置指令的功能，允许你定义自己的指令并使用它们。
下面是如何定义和使用一个自定义指令的基本步骤：
1.1. 定义自定义指令
你可以在Vue实例或Vue组件中定义一个自定义指令。
定义时需要提供一个或多个钩子函数，这些函数会在特定时刻被调用。
例如，我们定义一个v-focus指令，用于让元素在页面加载后获得焦点：
// 在 Vue 实例中注册全局指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus();
}
});或者在组件内部注册局部指令：
export default {
directives: {
focus: {
inserted(el) {
el.focus();
}
}
}
}1.2. 使用自定义指令
定义了自定义指令后，你可以在模板中像使用内置指令一样使用它：
<input v-focus placeholder="Focus me!">
1.3. 钩子函数
自定义指令可以有以下钩子函数：
•bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
•inserted:被绑定元素插入到DOM中时调用。
•update:所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
•componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用。
•unbind:只调用一次，指令与元素解绑时调用。
每个钩子函数接收以下参数：
•el:指令绑定的元素，可以用来直接操作DOM。
•binding:一个对象，包含：
-value:指令的传递值，例如：v-my-directive="1+1"中，binding.value将会是2。
-oldValue:上一个值，仅在update和componentUpdated钩子中可用。
-expression:字符串形式的未解析的绑定表达式，例如v-my-directive="1+1"中，expression是"1+1"。
-arg:传给指令的参数，如v-my-directive:foo中的"foo"。
•vnode:Vue编译生成的虚拟节点。
•oldVnode:上一个虚拟节点，仅在update和componentUpdated钩子中可用。
这就是在Vue.js中创建和使用自定义指令的基本流程。
