持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

自定义指令

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

自定义指令

上一节，我们实现了，能够获取到当前用户 所有的 按钮权限

这一节，熟悉下什么是 自定义指令

下面将讲解的是 vue3，以及 全局的一个 自定义指令

学习

首先 vue 中自带的有很多指令，例如常用的 v-on,v-bind,v-for,v-if 等等指令

那什么是自定义指令呢？

• 例如我们不喜欢使用 v-if 来进行判断，喜欢起一个自己喜欢的名字 v-wzms 来进行控制是否显示

• 就是功能和 v-if 一样，但是使用方式不是 v-if，而是 v-wzms

实现

通过 vue3 内部的方法 app.directive() 来进行 注册 自定义指令

• 接受两个参数

  • 第一个参数是 指令的名字

  • 第二个参数是 对象 或者 函数

即如下代码：

  const app = createApp({})
  
  // 方式一
  app.directive('wzms', {})
  // 方式二
  app.directive('wzms', ()=>{})

那对象或者函数里面，是什么东西呢？

这里找了一张图，其实里面就是我们的指令钩子

一看这么多，其实在项目中，大部分情况下，使用的是这个钩子 mounted(el,binding)

• el 就是当前指令绑定的元素，可以直接操作dom

• binding 是一个对象，我们绑定的值，会在这里面进行展示，里面有很多属性，有兴趣的去看看详细的

  • 由于我们可以通过多种方式绑定，这里讲解一种常用的，也就是他的 binding 的 value 属性

例如：

• v-wzms="true" 那么 binding.value = true

• v-wzms="false" 那么 binding.value = false

那么我们就可以轻松的实现 v-if 的逻辑了

app.directive('wzms', wzms)

const wzms = {
  mounted(el, binding) {
    if (!binding.value) {
        el.remove()
    }
  }
}

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

这一节，讲解了什么是 自定义指令，以及实现一个类似 v-if 功能的 自定义指令