回答思路:
- 定义
- 何时用
- 如何用
- 常用指令
- vue3变化
回答范例:
- vue有一些内置指令,如:v-model、v-show等,同时也支持用户注册自定义指令来扩展vue的能力。
- 自定义指令主要完成一些可复用低层级DOM操作。
- 使用自定义指令主要分为定义、注册、使用三步:
- 自定义指令有两种方式:对象和函数形式,前者类似组件定义,有各种生命周期,后者只会在mounted和updated时执行;(个人只对对象形式印象深点)
- 注册自定义指令类似组件,可以使用app.directive()全局注册,或者使用{directives:{xxx}}局部注册。
- 在使用时在注册名称前加上v-即可,比如v-focus;
4、 在项目中常用到的一些自定义指令,例如:v-premission按钮权限。
使用:
小tips(自定义指令的钩子函数):
Vue2:bind-指令绑定到元素后调用,只调用一次。
Inserted-元素插入父DOM后调用。
Update-当元素更新,子元素尚未更新时调用。
componentUpdate-被绑定的元素所在模板完成一次更新周期,就调用。
Unbind-一旦指令被移除就调用,只调用一次。
Vue3: created :绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时,这很有用。
beforeMounted :当指令第一次绑定到元素并且在挂载父组件之前执行。
mounted :绑定元素的父组件被挂载之后调用。
beforeUpdate :在更新包含组件的 VNode 之前调用。
updated :在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmounted :在卸载绑定元素的父组件之前调用。
unmounted :当指令与元素解除绑定且父组件已卸载时,只调用一次。
对象写法的自定义指令:
函数写法的自定义指令: