- 分析:这是一道API题,我们可能写的自定义指令少,但是我们用的多呀,多举几个例子就行;
- 使用:
// Vue2
directives: {
focus: {
inserted(el, binding, vnode) {
el.focus()
}
}
}
// Vue2全局注册
Vue.directive("focus", {
inserted(el, binding, vnode) {
el.focus()
},
})
// Vue3 setup
const vFocus = {
mounted(el) {
el.focus()
}
}
// Vue3全局注册
app.directive("focus", {
mounted: (el) => {
el.focus()
},
})
-
思路
- 1.定义;
- 2.何时用;
- 3.如何用;
- 4.常用指令;
- 5.vue3变化;
-
回答范例
- 1.Vue有一组默认指令,比如
v-model
或v-for
,同时Vue也允许用户注册自定义指令来扩展Vue能力; - 2.自定义指令主要完成一些可复用低层级DOM操作;
- 3.使用自定义指令分为定义、注册和使用三步:
- 定义自定义指令有两种方式:对象和函数形式,前者类似组件定义,有各种生命周期;后者只会在
mounted
和updated
时执行; - 注册自定义指令类似组件,可以使用
app.directive()
全局注册,或者使用{directives:{xxx}
局部注册; - 使用时在注册名称前加上
v-
即可,比如v-focus
;
- 定义自定义指令有两种方式:对象和函数形式,前者类似组件定义,有各种生命周期;后者只会在
- 4.我在项目中常用到一些自定义指令,例如:
- 复制粘贴v-copy
- 长按v-longpress
- 防抖v-debounce
- 图片懒加载v-lazy
- 按钮权限v-premission
- 页面水印v-waterMarker
- 拖拽指令v-draggable
- 5.vue3中指令定义发生了比较大的变化,主要是钩子的名称保持和组件一致,这样开发人员容易记忆,不易犯错。另外在V3.2之后,可以在setup中以一个小写v开头方便的定义自定义指令了;
- 1.Vue有一组默认指令,比如