Vue3中自定义指令

1. 认识自定义指令

• 1.1. 在Vue的模板语法中有各种各样的质量：v-show,v-for, v-model等，除了使用这些指令外，Vue也允许我们来自定义自己的指令
  • 1.1.1. 注意：在Vue中，代码的复用和抽象主要还是通过组件；
  • 1.1.2. 通常在某些情况下，需要对DOM元素进行底层操作，这个时候就会用到自定义指令

1.2. 自定义指令分为两种：

• 1.2.1. 全局指令：app的directive方法，可以在任意组件中被使用
• 1.2.2. 局部指令：组件中通过的directives方法，只能在当前组件中使用

1.3. 自定义指令的简单案例： 当某个元素挂载完成后可以自动获取焦点

• 1.3.1. 实现方式一： 使用默认的实现方式
• 1.3.2. 实现方式二： 自定义一个v-focus的局部指令

  • 1.3.2.1. options实现方式

    • 自定义指令实现，需要在组件选项中使用directives；
    • 它是一个对象，在对象中编写自定义指令的名称（注意：这里不需要加v-）;
    • 自定义指令有一个生命周期，是在组件挂载后调用的mounted, 可以在其中完成操作
    • 代码如下：

        <script>export default {directives: {focus: {mounted (el) {// 生命周期的函数(自定义指令)el?.focus()}}}}</script>
      

  • 1.3.2.2. Composition Api 实现方式

    • 自定义局部指令, 必须v开头
    • 代码如下：

        <script setup>// 2. 方式二： 自定义局部指令, 必须v开头const vFocus = {mounted (el) {// 生命周期的函数(自定义指令)el?.focus()}}</script>
      

  • 1.3.3. 实现方式三： 自定义一个v-focus的全局指令

    • 代码如下：

      const app = createApp(App)//  自定义全局指令app.directive('focus', {mounted (el) {el.focus()}})app.mount('#app')
    

1.4. 自定义指令的生命周期

• created: 在绑定元素的attribute或时间监听器被应用之前调用；

• beforeMount: 当指令第一次绑定到元素并且挂载父组件之前调用；

• mounted: 在绑定元素的父组件被挂载后调用；

• beforeUpdate: 在更新包含组件的VNode之前调用；

• updated: 在更新包含组件的VNode及其子组件的VNode更新后调用；

• beforeUnmount: 在卸载绑定元素的父组件之前调用；

• unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次；

• 代码如下：

    <script setup>const vWhy = {created () {console.log('created');},beforeMount () {console.log('beforeMount');},mounted(el) {console.log('mounted');},beforeUpdate () {console.log('beforeUpdate');},updated () {console.log('updated');},beforeUnmount () {console.log('beforeUnmount');},unmounted () {console.log('unmounted');}}</script>

1.5. 自定义指令参数和修饰符

• 代码如下：

  <!-- 自定义指令的参数和修饰符v-model:title.lazy.trim="message"title： 指令参数 -> args -> argumentslazy： 修饰符 -> modifiers -> 懒加载trim： 修饰符 -> modifiers -> 去除空格message： 绑定的变量，值 -> value -> 最后赋值给title--><input type="text" v-model:title.lazy.trim="message"> 
  

• 案例代码如下：

    <template><div class="app">// 1.参数-修饰符-值<h2 v-why:kobe.cba.abc="message" class="title">哈哈哈</h2>//  <!-- 2.价格拼接单位符号 --><h2 v-unit>{{ 111 }}</h2></div></template><script setup>import { ref } from 'vue';const price = ref(111);const unit = ref('¥')const message = ref('你好，李银河');const vWhy = {mounted(el, bindings) {el.textContent = bindings.value},}</script>
  

1.6. 统一抽取自定义全局指令

• 1.6.1. 创建directives文件夹

  // 在main.js中引入import { useDirectives } from './01_自定义指令/directives/index.js'const app = createApp(App)useDirectives(app)```

• 1.6.2. directives下创建index.js统一导入导出所有自定义指令

     // 导入对应指令文件import  directiveUnit from "./unit";// 导出useDirective函数并执行指令export function useDirectives (app) {directiveUnit(app)} ```
  

• 1.6.3. 创建指令.js文件 (例如: unit.js)

     export default function directiveUnit (app) {app.directive('unit', {mounted (el, bindings) {//  获取默认文本值const defaultText = el.textContent;// 如果没传单位参数，设置默认值let unit = bindings.value; if(!unit) {unit = '¥'}// 添加单位el.textContent = unit + defaultText}})}