Vue3中自定义指令

06-01 1094阅读

自定义指令

1. 认识自定义指令
1.2. 自定义指令分为两种：
1.3. 自定义指令的简单案例：当某个元素挂载完成后可以自动获取焦点
1.4. 自定义指令的生命周期
1.5. 自定义指令参数和修饰符
1.6. 统一抽取自定义全局指令

1.7. 自定义指令时间格式化案例

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, 可以在其中完成操作

代码如下：

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

1.3.2.2. Composition Api 实现方式

自定义局部指令, 必须v开头

代码如下：

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

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: 当指令与元素解除绑定且父组件已卸载时，只调用一次；

代码如下：

  
    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');
      }
    }

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

代码如下：
```
   
```

案例代码如下：

  
    
      // 1.参数-修饰符-值
      哈哈哈
      //  
      {{ 111 }}
    
  
  
    import { ref } from 'vue';
    const price = ref(111);
    const unit = ref('¥')
    const message = ref('你好，李银河');
    const vWhy = {
      mounted(el, bindings) {
        el.textContent = bindings.value
      },
    }

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
       }
     })
   }

1.7. 自定义指令时间格式化案例

1.7.1. 创建ftime文件

代码如下：

  // ftime.js
  import dayjs from "dayjs";
  export default function directiveFTime (app) {
    app.directive('ftime', {
      mounted (el, bindings) {
        // 1.获取时间，并且转化成毫秒
        let timestamp = el.textContent;
        if(timestamp.length === 10) {
          timestamp = timestamp * 1000
        }
    
        timestamp = Number(timestamp)
        // 2.获取传入的参数
        let value = bindings.value
        if(!value) {
          value = 'YYYY-MM-DD HH:mm:ss'
        }
        // 3.对时间进行格式化
        const formatTime = dayjs(defaultText).format(value)
        el.textContent = formatTime
      }
    })
  }

1.7.2. directives/index.js文件中引入ftiem文件

  import directiveFtime from "./ftime";
  export function useDirectives (app) {
    directiveFtime(app)
  }

1.7.3. 在main.js中引入useDirectives函数并执行指令

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

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。