vue2.x与vue3.x中自定义指令详解(最新推荐)

更新时间：2022年12月05日 16:41:21 作者：不叫猫先生

vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作，比如防抖、节流、懒加载、输入框自动聚焦等等，使用起来非常方便，比如vue自带的v-text、v-html、v-show、v-if等等,这篇文章主要介绍了vue2.x与vue3.x中自定义指令详解,需要的朋友可以参考下

🌮前言

vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作，比如防抖、节流、懒加载、输入框自动聚焦等等，使用起来非常方便，比如vue自带的v-text、v-html、v-show、v-if等等。

🥙一、自定义指令分类

局部自定义指令：只在组件内有效
全局自定义指令：所有组件都有效

🥪二、Vue2.x自定义指令钩子函数

bind：只会调用一次，指令第一次绑定到元素时会调用
inserted：被绑定元素插入父节点时调用。
update：元素第一次绑定不会触发，绑定的值发生更新触发，可能发生在其子节点更新之前。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

（1）bind与update区别

相同点：

dom插入都会调用，bind在inserted之前

异同点：

bind 时父节点为 null
inserted 时父节点存在
bind是在dom树绘制前调用，inserted在dom树绘制后调用

（2）update与componentUpdated区别

组件更新都会调用，update在componentUpdated之前
update 组件更新前的状态，componentUpdated 组件更新后的状态

Vue.directive('focus', {
  inserted: function (el) {
    console.log(el.parentNode, 'inserted')
    el.focus();
  },
  bind: function (el) {
    console.log(el.parentNode, 'bind')
    el.focus();
  },
});

输出结果如下，说明执行bind时，还没父节点；执行inserted时，已有父节点。

（3）钩子函数的参数（摘自官网）

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

 <p v-style:[direction]="connect">Enter connection information to connect</p>

    directives: {
        style: {
            bind(el,binding) {
              console.log(binding,'binding')
                el.style.fontSize = "30px";
                el.style.color = "blue";
            },
        },
    },

（4）局部自定义指令

在组件A.vue，用自定义指令实现改变文字颜色

<p v-style>文字描述</p>

 directives: {
    style: {
      bind(el,binding) {
        el.style.fontSize = "30px";
         el.style.color = "blue";
      },
      update(el,binding){
      el.style.fontSize = "30px";
      el.style.color = "blue";
      }
    },
  },

style：指令的名称，使用的时候要加前面加个v-
bind：只会调用一次，指令第一次绑定到元素时会调用
el：是指绑定的这个dom元素本身
binding：获取绑定指令的信息（name：指令名称；rawName：指令全称：value：指定绑定的值）
update：元素第一次绑定不会触发，绑定的值发生更新触发，参数与binding是相同的，如果逻辑与bind相同的话可以直接把指令当成函数写，上面的指令是对象类型。
v-style：使用指令改变了元素的样式

（5）全局自定义指令

使用Vue.directive(‘指令名称’,{钩子函数})

第一个参数为字符串，指令的名称
第二个参数是一个对象，用于接收指令的参数值

Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

（6）简写形式

如果update逻辑与bind相同的话可以直接把指令当成函数写

Vue.directive('style',{
    bind(el) {
      el.style.fontSize = "30px";
      el.style.color = "blue";
    },
  },
)

🍔 三、Vue3.x自定义指令钩子函数

（1）指令钩子函数（摘自官网）

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

（2）钩子函数参数

指令的钩子会传递以下几种参数：

el：指令绑定到的元素。这可以用于直接操作 DOM。
binding：一个对象，包含以下属性。
value：传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
instance：使用该指令的组件实例。
dir：指令的定义对象。
vnode：代表绑定元素的底层 VNode。
prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

（3）局部注册两种方式

<script lang="ts" setup>
// 局部指令, 变量名为驼峰命名(vFocus = v-focus)
const vFocus = {
  mounted: (el:any) => {
    el.focus()
    console.log(el, '已经自动获得焦点')
  }
}
</script>

<script lang="ts">
const vFocus = {
    focus:  {
        mounted(el:any){
            el.focus();
            console.log(el, "已经自动获得焦点");
        }
    },
};
export default {
    setup() { },
    directives: vFocus,
};
</script>

（4）全局注册

组件A.vue

  <input type="text" v-focus>

在directives文件夹新建focus.ts文件

const directives: any = {
	mounted(el: any) {
		el.focus();
		el.value = '1'
	}
}
export default {
	name: "focus",
	directives
}

在directives文件夹新建index.js

import type { App } from 'vue'
import focus from './focus'
export default function installDirective(app: App) {
    app.directive(focus.name, focus.directives);
}

main.ts文件

import directives from './directives'
const app = createApp(App);
app.use(directives);

（5）简化形式

当update和mounted中的函数体一样时，则可以简写成如下：

const directives = (el:any) => {
		el.focus();
		el.value = '1';
}
export default {
	name: "focus",
	directives
}

到此这篇关于vue2.x与vue3.x中自定义指令详解的文章就介绍到这了,更多相关vue2.x与vue3.x自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue菜单栏自适应折叠功能示例
这篇文章主要介绍了vue菜单栏自适应折叠,我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-01-01
Vue路由重定向和别名的示例代码
在Vue.js应用开发中,Vue Router 提供了许多特性来简化前端路由管理和用户体验,其中一个重要的特性便是路由重定向和别名,它们可以帮助我们更好地管理和组织路由,本文将详细介绍如何在Vue Router中使用路由重定向和别名,需要的朋友可以参考下
2024-09-09
解决vue处理axios post请求传参的问题
下面小编就为大家分享一篇解决vue处理axios post请求传参的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue使用mui遇到的坑及解决
这篇文章主要介绍了vue使用mui遇到的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
vue打包后dist目录下的index.html网页显示空白的问题(两种方案)
本文主要介绍了vue打包后dist目录下的index.html网页显示空白的问题,主要介绍了两种方式,具有一定的参考价值,感兴趣的可以了解一下
2023-11-11
el-tree的实现叶子节点单选的示例代码
本文主要介绍了el-tree的实现叶子节点单选的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue前端性能优化之预加载和懒加载示例详解
这篇文章主要为大家介绍了vue前端性能优化之预加载和懒加载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Vue极简生成器 Vuepress的实现
本文主要介绍了Vue极简生成器 Vuepress的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>
2022-06-06
vue之数据代理详解
这篇文章主要为大家介绍了vue之数据代理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
vue回到顶部监听滚动事件详解
这篇文章主要为大家详细介绍了vue回到顶部监听滚动事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-08-08