自定义指令 vue2 和 vue3 的区别

最新推荐文章于 2024-05-18 00:17:51 发布

疯狂的小老鼠

最新推荐文章于 2024-05-18 00:17:51 发布

阅读量229

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42040328/article/details/134857153

版权

自定义指令

vue2自定义指令属性

自定义指令的钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。
自定义指令可传入以下参数:
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
1. name：指令名，不包括 v- 前缀。
2. value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
3. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4. expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
5. arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
6. modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  vnode：Vue 编译生成的虚拟节点。
  oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

vue3自定义指令属性

自定义指令的钩子函数：
created // 在绑定元素的 attribute 或事件监听器被应用之前调用
beforeMount // 在绑定元素的父组件挂载之前调用
mounted // 绑定元素的父组件被挂载时调用
beforeUpdate // 在包含组件的 VNode 更新之前调用
updated // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
beforeUnmount // 在绑定元素的父组件卸载之前调用
unmounted // 卸载绑定元素的父组件时调用
自定义指令可传入以下参数:
```
mounted(el, binding, vnode, preVnode) {}
```
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
1. dir：指令的定义对象
2. instance：使用该指令的组件实例，但不是DOM元素
3. value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
4. oldValue：指令绑定的前一个值，仅在 updated 和 beforeUpdate 钩子中可用。无论值是否改变都可用。
5. arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
6. modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
7. expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
  vnode：代表绑定元素的底层VNode
  preVnode：代表之前的渲染中指令所绑定元素的VNode,仅在 updated 和 beforeUpdate 钩子中可用

vue2自定义指令使用

创建directive文件并在里面创建common/color.js

   /**
    * v-color  改变文字颜色
    */

   export default {
       inserted(el) {
           el.style = `
         color: #1e80ff;
         `
       },
   };

在directive文件内创建 index.js 然后集中引用

单个引用

   import color from './common/color'

   const install = function(Vue) {
     Vue.directive('color', color)
   }

   export default install

多个引用

   import color from "./common/color"

   const directives = {
      color
   }
   const install = function(app) {
      Object.keys(directives).forEach((key) => {
         app.directive(key, directives[key])
      })
   }
   export default install

批量自动引入并注册

   const requireComponent = require.context(
       // 组件目录绝对路径
       './common',
       // 是否查询其子目录
       false,
       // 匹配基础组件文件名的正则表达式
       /\.(vue|js)$/
   )
   
   // 创建函数统一注册
   const install = (Vue) => {

       requireComponent.keys().forEach(fileName => {
           // 获取组件配置
           const componentConfig = requireComponent(fileName)

           // 剥去文件名开头的 `./` 和结尾的扩展名
           const componentName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')

           // 注册指令
           Vue.directive(
               componentName,
               componentConfig.default || componentConfig
           )
       });
   }
   export default install

在main.js里面引用注册全局

   import directive from "@/directive/index"; //directive，自定义指令
   Vue.use(directive);

vue3自定义指令使用

局部创建指令

   <input v-focus />
   directives: {
     focus: {
       // 指令的定义
       mounted(el) {
         el.focus()
       }
     }
   }