自定义指令

简介: 自定义指令的基本用法和组件类似分全局注册和局部注册,区别就是把component换成了derective钩子函数

自定义指令的基本用法

和组件类似分全局注册和局部注册,区别就是把component换成了derective

钩子函数

指令定义函数提供了几个钩子函数(可选):

bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时 执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的 绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次, 指令与元素解绑时调用。

钩子函数的参数有:

el: 指令所绑定的元素,可以用来直接操作 DOM 。

binding: 一个对象,包含以下属性:

name:

指令名,不包括 v- 前缀。

value:

指令的绑定值,例如:v-my-directive='1 + 1', value 的值是 2。

oldValue:

指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无 论值是否改变都可用。

expression:

绑定值的字符串形式。 例如 v-my-directive='1 + 1' , expression 的值是 '1 + 1'。

arg:

传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。

modifiers:

一个包含修饰符的对象。

例如: v-my-directive.foo.bar, 修饰符对象modifiers 的值是 { foo: true, bar: true }

vnode:

Vue 编译生成的虚拟节点。

oldVnode:

上一个虚拟节点,仅在update和componentUpdated钩子中可用。

代码示例

//自定义的指令
<div v-cuihua:ergou.a.b.c="pbq">
data:{
  obq:'我是自定义指令所绑定的值'
}

4822650a9d50470b96714912459915b.png

目录
相关文章
|
4月前
|
JavaScript
vue3自定义指令
vue3自定义指令
|
4月前
|
JavaScript
vue自定义指令详解
【4月更文挑战第5天】Vue自定义指令用于扩展模板功能,通过`Vue.directive()`全局或组件内注册。它们有生命周期钩子函数,如`bind`、`inserted`等,在不同阶段执行相应操作。在模板中以`v-`前缀或简写形式使用,可接受参数和修饰符来定制行为。
40 8
|
4月前
|
JavaScript
vue3中使用全局自定义指令和组件自定义指令
全局自定义指令和组件自定义指令的区别,除了写法不同和作用不同,其他的包括生命周期的使用方法都是一致的,全局自定义指令在main.ts中注册后整个项目都可以使用,而组件自定义指令只能在组件中注册,并且在组件中使用。
|
26天前
|
JavaScript 前端开发 编译器
Vue自定义指令详解
Vue自定义指令详解
14 0
|
2月前
|
JavaScript 前端开发 程序员
Vue指令的使用以及自定义指令
Vue指令的使用以及自定义指令
22 0
|
4月前
|
JavaScript API 开发者
自定义指令:创建和使用Vue自定义指令
【4月更文挑战第24天】Vue.js允许开发者创建自定义指令以适应特定需求,增强代码复用和可维护性。通过`Vue.directive`全局注册或组件内`directives`局部注册,定义指令行为。以`highlight`指令为例,展示`bind`和`click`钩子改变元素背景色。自定义指令包含多个生命周期钩子,可处理参数,提供灵活性。它们扩展HTML功能,封装复杂逻辑,提升代码质量,是Vue开发中的强大工具。
38 3
|
4月前
|
JavaScript 前端开发 开发者
Vue的自定义指令:创建自定义指令的技术详解
【4月更文挑战第24天】Vue.js 允许开发者创建自定义指令以扩展其功能。自定义指令提供灵活性,但需根据需求和最佳实践谨慎使用。
|
4月前
|
JavaScript
Vue自定义指令的三个方法
Vue自定义指令的三个方法
25 0
|
4月前
|
JavaScript
Vue中如何自定义指令?
Vue中如何自定义指令?
39 1
|
4月前
|
缓存 JavaScript 开发者
Vue中的自定义指令有什么作用?
Vue中的自定义指令有什么作用?
79 0