在 Vue2 中，我们可以使用 Vue.directive 函数来定义自定义指令。自定义指令用于对 DOM 操作的封装和复用。
在 Vue2 中，自定义指令的生命周期钩子函数的功能分别如下：
- bind: 只调用一次，在指令第一次绑定到元素时调用，用于进行一次性的初始化设置。
- inserted: 被绑定元素插入父节点时调用，用于进行 DOM 操作。
- update: 被绑定元素所在的模板更新时调用，而无论绑定值是否变化，以及何时发生变化都会调用。
- componentUpdated: 被绑定元素所在模板完成一个周期的更新时调用，只要组件数据变化，就会调用。
- unbind: 只调用一次，在指令解绑时调用，用于清除所有的绑定指令。
常用的自定义指令场景：
- v-focus：实现页面加载后自动聚焦到某个表单元素上。
- v-limit：限制表单输入框的输入长度，对于超出长度的字符提供错误提示。
- v-ellipsis：处理文本溢出的情况，通过省略号的形式显示文本，当用户鼠标悬停在省略号上时显示完整文本内容。
- v-scroll：在页面需要滚动操作时，当滚动到特定位置或高度时，显示浮动操作按钮或菜单进行快捷操作。
- v-drag：实现拖拽功能，当用户在指定的区域按下鼠标时，可以移动元素到指定的位置。
- v-lazy-img：图片懒加载，当图片未出现在用户可视区域内时，不进行请求和加载，当图片出现在用户可视区域内时，进行请求和加载。
- v-toggle：实现开关切换功能，当用户点击开关时，改变指定元素的显示状态。
- v-tooltip：鼠标悬停在某个元素上时，显示 tooltip 或 popover 提示框。