【总结】在Vue内置指令满足不了需求时-自定义指令

作用:

在Vue内置指令满足不了需求时, 可以自己定义使用

除了核心功能默认内置的指令 (`v-model` 和 `v-show`)，Vue 也允许注册自定义指令。 
`v-xxx`html+css的复用的主要形式是组件

你需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

用法

1. 注册

全局注册

在main.js用 Vue.directive()方法来进行注册, 以后随便哪个.vue文件里都可以直接用 v-指令名

Vue.directive('指令名', {
  // 当应用了该指令的元素被插入到 DOM 树上时执行该函数
  inserted(el) {}
})

局部注册

在当前组件中注册,只能在当前组件.vue文件中使用

directives: {
  指令名: {
    inserted(el) {}
  }
}

2. 使用

直接在标签上使用 v-指令名

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

<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
    data(){
        return {
            colorStr: 'red'
        }
    },
    directives: {
        focus: {
            inserted(el){
                el.focus()
            }
        }
    }
}
</script>

注意:

inserted方法 - 指令所在标签, 被插入到网页上触发(一次)

update方法 - 指令对应数据/标签更新时, 此方法执行