认识自定义指令

  • 在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来 自定义自己的指令。
    • 注意：在Vue中，代码的复用和抽象主要还是通过组件；
    • 通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；
  • 自定义指令分为两种：
    • 自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；
    • 自定义全局指令：app的 directive 方法，可以在任意组件中被使用；
  • 比如我们来做一个非常简单的案例：当某个元素挂载完成后可以自定获取焦点
    • 实现方式一：如果我们使用默认的实现方式；
    • 实现方式二：自定义一个 v-focus 的局部指令；
    • 实现方式三：自定义一个 v-focus 的全局指令；

实现方式一：聚焦的默认实现

实现方式二：局部自定义指令

  • 实现方式二：自定义一个 v-focus 的局部指令
    • 这个自定义指令实现非常简单，我们只需要在组件选项中使用 directives 即可；
    • 它是一个对象，在对象中编写我们自定义指令的名称（注意：这里不需要加v-）；
    • 自定义指令有一个生命周期，是在组件挂载后调用的 mounted，我们可以在其中完成操作；

方式三：自定义全局指令

自定义一个全局的v-focus指令可以让我们在任何地方直接使用

指令的参数和修饰符

  • 如果我们指令需要接受一些参数或者修饰符应该如何操作呢？
    • info是参数的名称
    • aaa-bbb是修饰符的名称；
    • 后面是传入的具体的值；
  • 在我们的生命周期中，我们可以通过 bindings 获取到对应的内容：

自定义指令练习

  • 自定义指令案例：时间戳的显示需求：
    • 在开发中，大多数情况下从服务器获取到的都是时间戳；
    • 我们需要将时间戳转换成具体格式化的时间来展示；
    • 在Vue2中我们可以通过过滤器来完成；
    • 在Vue3中我们可以通过 计算属性（computed） 或者 自定义一个方法（methods） 来完成；
    • 其实我们还可以通过一个自定义的指令来完成；
  • 我们来实现一个可以自动对时间格式化的指令v-format-time：
    • 这里我封装了一个函数，在首页中我们只需要调用这个函数并且传入app即可；