自定义指令

简介: 自定义指令的基本用法和组件类似分全局注册和局部注册,区别就是把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

目录
相关文章
|
7月前
|
JavaScript 前端开发 程序员
vue的事件绑定和修饰符
vue的事件绑定和修饰符
89 0
|
7月前
|
JavaScript
vue3中使用全局自定义指令和组件自定义指令
全局自定义指令和组件自定义指令的区别,除了写法不同和作用不同,其他的包括生命周期的使用方法都是一致的,全局自定义指令在main.ts中注册后整个项目都可以使用,而组件自定义指令只能在组件中注册,并且在组件中使用。
254 1
|
4月前
|
JavaScript 前端开发 编译器
Vue自定义指令详解
Vue自定义指令详解
30 0
|
5月前
|
JavaScript 前端开发 程序员
Vue指令的使用以及自定义指令
Vue指令的使用以及自定义指令
46 0
|
7月前
|
JavaScript API 开发者
自定义指令:创建和使用Vue自定义指令
【4月更文挑战第24天】Vue.js允许开发者创建自定义指令以适应特定需求,增强代码复用和可维护性。通过`Vue.directive`全局注册或组件内`directives`局部注册,定义指令行为。以`highlight`指令为例,展示`bind`和`click`钩子改变元素背景色。自定义指令包含多个生命周期钩子,可处理参数,提供灵活性。它们扩展HTML功能,封装复杂逻辑,提升代码质量,是Vue开发中的强大工具。
63 3
|
7月前
|
JavaScript 前端开发 开发者
Vue的自定义指令:创建自定义指令的技术详解
【4月更文挑战第24天】Vue.js 允许开发者创建自定义指令以扩展其功能。自定义指令提供灵活性,但需根据需求和最佳实践谨慎使用。
|
7月前
|
JavaScript
Vue自定义指令(二)
Vue自定义指令(二)
|
7月前
|
JavaScript
Vue自定义指令的三个方法
Vue自定义指令的三个方法
48 0
|
7月前
|
JavaScript
Vue中如何自定义指令?
Vue中如何自定义指令?
50 1
|
7月前
|
JavaScript
(详解)Vue3自定义指令
(详解)Vue3自定义指令
215 2