理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

目录
  • Vue2.x用法
    • 全局注册
    • 局部注册
    • 使用
    • 钩子函数
      • 钩子函数的参数
  • Vue3.x用法
    • 全局注册
    • 局部注册
    • 使用
    • 钩子函数
      • 较 Vue2.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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue指令的钩子函数使用方法

    在Vue 中可以把一系列复杂的操作包装为一个指令. 什么是复杂的操作? 我的理解是:复杂逻辑功能的包装.违背数据驱动的 DOM 操作以及对一些 Hack 手段的掩盖等.我们总是期望以操作数据的形式来实现功能逻辑. 钩子函数 对于自定义指令的定义,Vue2 有 5 个可选的钩子函数. bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中).

  • vue3.0中setup使用(两种用法)

    一.setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1.setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的 2.

  • 详解Vue源码学习之callHook钩子函数

    Vue实例在不同的生命周期阶段,都调用了callHook方法.比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created'). 这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子. var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mount

  • Vue的路由及路由钩子函数的实现

    什么是路由 什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径. web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'.(即根据网址找到能处理这个URL的程序或模块) 使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序:当引入vue-router后,我们需要处理的是将组件(components)映射到路由(routes),然后在需要的地方进行使用渲染. 其所包含的功能有: 嵌套的

  • 理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

    目录 Vue2.x用法 全局注册 局部注册 使用 钩子函数 钩子函数的参数 Vue3.x用法 全局注册 局部注册 使用 钩子函数 较 Vue2.x 相比, 钩子函数有变化 Vue2.x用法 全局注册 Vue.directive( 指令名, { 自定义指令生命周期 } ) 局部注册 directives: { 指令名, { 自定义指令生命周期 } } 使用 v-指令名: 属性名.修饰符="value值" 钩子函数 bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只

  • vue3.0自定义指令（drectives)知识点总结

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做. const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`, }); 在mou

  • 如何写一个 Vue3 的自定义指令

    目录 背景 插件 指令的实现 前端巅峰 以下文章来源于微信公众号前端巅峰 背景 众所周知,Vue.js 的核心思想是数据驱动 + 组件化,通常我们开发页面的过程就是在编写一些组件,并且通过修改数据的方式来驱动组件的重新渲染.在这个过程中,我们不需要去手动操作 DOM. 然而在有些场景下,我们还是避免不了要操作 DOM.由于 Vue.js 框架接管了 DOM 元素的创建和更新的过程,因此它可以在 DOM 元素的生命周期内注入用户的代码,于是 Vue.js 设计并提供了自定义指令,允许用户进行一些底

  • Vue3 编写自定义指令插件的示例代码

    编写自定义插件 // src/plugins/directive.ts import type { App } from 'vue' // 插件选项的类型 interface Options { // 文本高亮选项 highlight?: { // 默认背景色 backgroundColor: string } } /** * 自定义指令 * @description 保证插件单一职责,当前插件只用于添加自定义指令 */ export default { install: (app: App,

  • vue3使用自定义指令实现el dialog拖拽功能示例详解

    目录 实现el-dialog的拖拽功能 通过自定义指令实现拖拽功能 实现拖拽功能 使用方式 实现el-dialog的拖拽功能 这里指的是 element-plus 的el-dialog组件,一开始该组件并没有实现拖拽的功能,当然现在可以通过设置属性的方式实现拖拽. 自带的拖拽功能非常严谨,拖拽时判断是否拖拽出窗口,如果出去了会阻止拖拽. 如果自带的拖拽功能可以满足需求的话,可以跳过本文. 通过自定义指令实现拖拽功能 因为要自己操作dom(设置事件),所以感觉还是使用自定义指令更直接一些,而且对原

  • vue3的自定义指令directives实现

    vue3的自定义指令directives实现

    目录 一.什么是自定义指令 二.指令的分类 三.指令的作用 四.指令的钩子 五.钩子参数 六.指令的使用 指令的参数和修饰符 一.什么是自定义指令 我们已经熟悉Vue内置的一系列指令 ,比如 v-model, v-show, v-if, v-for等等,自定义指令从命名上看主要区别于Vue自带的内置指令,我们可以创建自己想要的指令,使用必须以v-为前缀 二.指令的分类 局部指令:组件中通过directives选项实现,只能在当前组件中使用 全局指令:应用实例的directive方法,可以在任意组

  • vue自定义指令用法经典实例小结

    本文实例总结了vue自定义指令用法.分享给大家供大家参考,具体如下: 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-red="参数"></div> 指令名称:     v-red  ->  red * 注意: 必须以 v-开头 拖拽: 二.自定义元素指令:(用处不大) Vue.elementDirective('zns-red',{ bind:f

  • AngularJs1.x自定义指令独立作用域的函数传入参数方法

    在定义指令的scope属性如果设置成了{},那就成为了一个独立作用域,如果要传入一个方法,使用&,但是这里的传参有点不一样. 先看下官网解释: & or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as

  • Vue在自定义指令绑定的处理函数中传递参数

    目录 在自定义指令绑定的处理函数中传递参数 需求背景 方式一:包装函数 方式二:利用动态参数 在自定义指令中的传递参数时value和expression的区别 注意点 总结 在自定义指令绑定的处理函数中传递参数 需求背景 现在需要为自定义指令绑定函数,并且需要向函数中传递参数,类似 v-on="handleFunc(arg1, arg2)". Vue 的指令预期得到的值是一个 JavaScript 表达式,除了 v-on 和 v-for 这两个特殊指令外,其他的指令会自动计算该表达式的

  • vue3 自定义指令详情

    目录 一.注册自定义指令 1.1.全局自定义指令 1.2.局部自定义指令 二.自定义指令中的生命周期钩子函数 三.自定义指令钩子函数的参数 四.自定义指令参数 一.注册自定义指令 以下实例都是实现一个输入框自动获取焦点的自定义指令. 1.1.全局自定义指令 在vue2中,全局自定义指令通过 directive 挂载到 Vue 对象上,使用 Vue.directive('name',opt). 实例1:Vue2 全局自定义指令 Vue.directive('focus',{ inserted:(e

随机推荐