理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理
Vue2.x用法
全局注册
Vue.directive( 指令名, { 自定义指令生命周期 } )
局部注册
directives: { 指令名, { 自定义指令生命周期 } }
使用
v-指令名: 属性名.修饰符=“value值”
钩子函数
bind
- 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只是加入进了DOM, 但是渲染没有完成
inserted
- 自定义指令所在DOM, 插入到父 DOM 后调用, 渲染已完成(最最重要)
update
- 元素更新, 但子元素尚未更新, 将调用此钩子( 自定义指令所在组件更新时执行, 但是不保证更新完成 ) —> 和自定义所在组件有关
componentUpdated
- 组件和子级更新后执行( 自定义指令所在组件更新完成, 且子组件也完成更新 ),
—> 和自定义所在组件有关
unbind
- 解绑(销毁) .( 自定义指令所在 DOM 销毁时执行 ). 只调用一次
钩子函数的参数
注意: 自定义指令中, 都不能直接使用this
1.el:
当前指令所在的dom元素。
2.binding:
是一个对象, 表示当前指令上的属性、修饰符、value值等信息。只有value最重要, 常用
arg
:String, 属性名 。例如 v-my-directive:foo 中,属性名为 “foo”。
modifiers
:Object, 包含所有修饰符的一个对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
name
:String, 指令名,不包括 v- 前缀。
rawName
, String, 完整指令名,例如 v-my-directive:foo.bar=“1 + 1” 中, 完整指令名就是 v-my-directive:foo.bar=“1 + 1”
value
:Any, 指令绑定的当前值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。(最最重要)
expression
:String, 解析的哪一个值、表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
oldValue
:Any, 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
oldArg
:Any, 指令属性名的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
3.vnode
:当前节点信息, 可以获取, 当前指令所在组件的实例 vnode.context - 当前指令所在的实例对象
4.oldVnode
:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
Vue3.x用法
用法和 Vue2.x 一样
全局注册
Vue.directive( 指令名, { 自定义指令生命周期 } )
局部注册
directives: { 指令名, { 自定义指令生命周期 } }
使用
v-指令名: 属性名.修饰符=“value值”
以插件的形式, 进行全局注册
钩子函数
较 Vue2.x 相比, 钩子函数有变化
最终的 API 如下:
const MyDirective = { created(el, binding, vnode, prevVnode) {}, // 新增 beforeMount() {}, mounted() {}, beforeUpdate() {}, // 新增 updated() {}, beforeUnmount() {}, // 新增 unmounted() {} }
created
- 自定义指令所在组件, 创建后
beforeMount
- 就是Vue2.x中的 bind, 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只是加入进了DOM, 但是渲染没有完成
mounted
- 就是Vue2.x中的 inserted, 自定义指令所在DOM, 插入到父 DOM 后调用, 渲染已完成(最最重要)
beforeUpdate
- 自定义指令所在 DOM, 更新之前调用
updated
- 就是Vue2.x中的 componentUpdated
beforeUnmount
- 销毁前
unmounted
- 销毁后
以上就是理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理的详细内容,更多关于Vue2.x和Vue3.x的资料请关注猪先飞其它相关文章!
相关文章
- 这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下...2017-05-22
- 这篇文章主要介绍了理解Vue2.x和Vue3.x的自定义指令的用法及钩子函数原理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2021-09-24
- 这篇文章主要介绍了Vue2.x 的双向绑定原理,Vue 是利用的 Object.defineProperty() 方法进行的数据劫持,利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容...2021-09-27
- Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,下面这篇文章主要给大家介绍了关于Vue生命周期和钩子函数的相关资料,需要的朋友可以参考下...2021-10-30
- 本篇文章主要介绍了Vue.directive自定义指令的使用详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 ...2017-03-13
- 这篇文章主要给大家介绍了关于vue自定义指令限制输入框输入值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-31
- 本文主要介绍AngularJS 自定义指令,这里整理了基础资料及详细的示例代码及实现效果图,有需要的小伙伴可以参考下...2016-08-24
- 这篇文章主要介绍了AngularJS实现自定义指令与控制器数据交互的方法,结合具体实例形式分析了AngularJS自定义指令的实现以及与控制器数据交互的操作技巧,需要的朋友可以参考下...2017-06-24
- 这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-29
- 本文主要介绍Vue.js中过滤器和自定义指令相关的知识点,包括过滤器的定义方式,和使用方法,以及自定义指令的概念和注册方式。...2021-05-20
CFileDialog的钩子函数解决对话框的多选之DoModal问题
前几天领导问我一个问题:就是使用CFileDialog类在设置多选时选中的文件所放的文件缓冲区不知设置多大合适,本文将详细介绍,需要的朋友可以参考下...2020-04-25- 这篇文章主要介绍了移动端Vue2.x Picker的全局调用实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-23
- 这篇文章主要为大家详细介绍了Vue3生命周期钩子函数,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2022-01-25
- 不同于vue2不需要被use使用,vue3的机制是你的指令必须要被注册成方法的,这样你才能全局使用到自定义指令,下面这篇文章主要给大家介绍了关于vue3自定义指令的相关资料,需要的朋友可以参考下...2022-11-24