如何在Vue中自定义全局指令.并设置单独模块管理自定义指令

六月得武汉天气是越来越热了,今天来学学,如何在工作中用单独模块管理自定义指令.我们可以先来了解一下自定义指令.

自定义指令-基本使用

自定义指令文档（了解）

除了核心功能默认内置的指令 (v-model 和 v-show)等，Vue 也允许注册自定义指令=》 v-xxx

1. html+css+js的复用的主要形式是组件
2. 你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

作用

扩展标签额外的功能

自定义指令-定义方式

{
  data(){},
  methods: {},
  directives: {
    focus: { // 自定义指令名
        inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
            el.focus()
        }
    },
  },
}

示例 自动获取焦点

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  // 注册
  directives: {
    focus: { // 自定义指令名
        inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
            el.focus()
        }
    }
  }
}
</script>

自定义指令-传值和更新

目标: 使用自定义指令, 传入一个值

需求: 定义color指令-传入一个颜色, 给标签设置文字颜色

main.js定义处修改一下

directives: {
  "color":{
    inserted(el, binding){ // 插入时触发此函数
      el.style.color = binding.value;
    },
    update(el, binding){ // 更新绑定的变量时触发此函数=》手动更新
      el.style.color = binding.value;
    }
  }
}

Direct.vue处更改一下

<p v-color="theColor" @click="changeColor">使用v-color指令控制颜色, 点击变蓝</p>

<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>

总结: v-xxx, 自定义指令, 获取原生DOM, 自定义操作

了解完自定义指令如何在工作总设置单独得模块管理自定义属性呢?

创建一个文件,编写你需要导出得自定义指令.并在main.js中导入自定义指令模块

import * as 别名 from '需要导入组件得路径'

总结:上面得两种放发都是遍历数组, 第二种方法相对于来说简洁一点,但是第一种比较好理解. 为什么要设置单独的模块管理自定义指令.因为在main.js中写多个自定义指令.会让代码显得冗余不方便管理,所以把所有得自定义指令单独设置一个模块让代码显得不那么冗余.方便代码得阅读易于查找自己所定义得指令.