vue3.0自定义指令(directives)

在大多数情况下,你都可以操作数据来修改视图,或者反之。但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令。

举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做。

const app = Vue.createApp({
  mounted(){
    this.$refs.input.focus();
  },
  template: `<input type="text" ref="input" />`,
});

在mounted钩子函数里,通过 $refs 获取需要聚焦的 DOM 元素,然后调用 focus 方法完成自动聚焦的功能。

基本使用

上面做法已经实现了我们需要的功能,但是假如说我们有多个组件都需要这个功能,那我们只能把这段代码复制过去,重新实现逻辑。我们下面看下如果使用自定义指令,应该怎么做。

const app = Vue.createApp({
  // 通过 v-[自定义指令名称] 绑定自定义指令
  template: `<input type="text" v-focus/>`,
});
// 注册一个全局自定义指令
app.directive('focus',{
  // 当被绑定的元素插入到DOM的时候执行..
  mounted(el){
    el.focus();
  }
})

如上,我们定义了一个全局自定义指令 focus,并通过 v-focus 绑定到需要聚焦的 input 元素上。如果,其他组件或模块也需要聚焦功能,只要简单的绑定此指令即可。

自定义指令的钩子函数

我们在上面定义指令的时候,会发现其中包含了 mounted 钩子函数,指令还提供了如下钩子函数,我们用代码的形式来给大家列出来。

app.directive('directiveName', {
  // 指令绑定元素挂载前
  beforeMount(el) {},
  // 指令绑定元素挂载后
  mounted(el, binding) {},
  // 指令绑定元素因为数据修改触发修改前
  beforeUpdate(el) {},
  // 指令绑定元素因为数据修改触发修改后
  updated(el) {},
  // 指令绑定元素销毁前
  beforeUnmount(el) {},
  // 指令绑定元素销毁后
  unmounted(el) {},
});

效果就不一一列举了,有兴趣大家可以尝试下分别触发这些钩子函数。指令钩子函数大部分与组件很类似,大家可以对比着来看。

动态指令参数

下面,我们再来看一个例子。

const app = Vue.createApp({
  template: `<div class="box" v-abs-top="num" style="position:absolute;" ></div>`,
});
// 在很多时候,你可能想在 mounted 和 updated 时触发相同行为,而不关心其它的钩子,就这样写
app.directive('absTop', (el) => {
  el.style[binding.arg] = '100px';
});

我们在 div 元素上绑定 absTop 指令,div 元素本身定位是 absolute,指令执行让绑定元素的 top 为 100px。这时候,我想在绑定指令的时候能够传一个参数,使得元素的 top 值可以根据参数来改变。代码如下:

const app = Vue.createApp({
  data() { return { num: 100 } },
  template: `<div class="box" v-abs-top="num"></div>`,
});
app.directive('absTop', (el, binding) => {
  el.style.top = binding.value + 'px';
});

元素可以通过 v-directive="value" 传入动态参数,指令通过钩子函数的第二个参数 binding.value 来接收参数。

如果其他元素可能不是修改 top 的值,有可能是 left、right 或者 bottom,那么指令可以动态指定吗?其实也是可以做到的。首先,我们修改模板为:

<div class="box" v-abs:left="num"></div>

然后修改指令本身

app.directive('absTop', (el, binding) => {
  el.style[binding.arg] = binding.value + 'px';
});

v-mydirective:[argument]="value" ,arguments 也是可以动态改变的,这样,就可以完美的实现上述要求了。

组件的使用

组件中绑定指令与 DOM元素绑定指令并没有什么不同,指令会获取组件的原生 根DOM 来操作。但是要注意的是,在 vue3.0 中,组件可能有多个根节点,指令绑定在多根节点组件是有问题的。

局部自定义指令

最后,再来简单说下局部自定义指令是怎么定义的。

const app = Vue.createApp({
directives: {
    focus: {
      // 指令的定义
      mounted(el) {
        el.focus()
      }
    }
  }
}

局部指令定义和全局指令基本一致,如上所示,在组件中定义 directives 就可以了。

总结

自定义指令可以提取出原生DOM操作的逻辑。所以指令的应用范围主要表现在,当一些操作涉及到 DOM 底层时,而且操作逻辑可能用于多处地方,就适合用指令来封装这些逻辑。

(0)

相关推荐

  • C#_.net core 3.0自定义读取.csv文件数据_解决首行不是标题的问题_Linqtocsv改进

    linqtocsv文件有不太好的地方就是:无法设置标题的行数,默认首行就是标题,这不是很尴尬吗?   并不是所有的csv文件严格写的首行是标题,下面全是数据,我接受的任务就是读取很多.csv报表数据, ...

  • Vue3.0 新特性以及使用变更总结(实际工作用到的)

    前言 Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0.去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vue3新特性的使用以及一些用法上的变 ...

  • Vue3.0 新特性以及使用经验总结

    vue3.0Vue3.0 在去年9月正式发布了,也有许多小伙伴都热情的拥抱Vue3.0.去年年底我们新项目使用Vue3.0来开发,这篇文章就是在使用后的一个总结, 包含Vue3新特性的使用以及一些用法 ...

  • 第一章——vue3.0 ts element-plus多页签应用模板:项目搭建篇

    目录 一.安装vue-cli@4.5.x 二.创建项目 三.项目配置 四.IDE配置 五.vue.config.js配置 六.篇章小结 一.安装vue-cli@4.5.x 工欲善其事,必先利其器,我们 ...

  • vue3.0 mixin 混入

    首先是官方定义:混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合&qu ...

  • 分享8个非常实用的Vue自定义指令

    作者:lzg9527 https://segmentfault.com/a/1190000038475001 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue ...

  • RISC-V 自定义指令如何保持软件的兼容性?

    RISC-V ISA(指令集架构)是以模块化方式设计的.这意味着ISA有几组指令(ISA扩展),可以根据需要启用或禁用.这允许精确地实现应用程序所需的指令组,而无需为没有使用到的区域提供额外的功耗.其 ...

  • 快人一步上手 Vue3.0

    程序员大佬 昨天Vue.js 3.0 "One Piece" 已正式发布,33% 的渲染速度提升.41% 的体积缩小.54% 的内存用量下降.代码可维护和可复用性提升--两个字来形 ...

  • 国内首个 vue3.0+antdv 开源Admin管理系统

    今天给大家推荐一个超优秀的Vue3.0中后台管理框架VueAdminBeautiful. vue-admin-beautiful 基于vue3.x+ant-design-vue构建的免费开源admin ...