Vue 自定义指令 自动获取焦点

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

html+css的复用的主要形式是组件

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

App.vue内准备内容

<template>
  <div>
      <!-- <input type="text" v-gfocus> -->
      <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>

<style>

</style>

这样 一个v-focus的自动获取焦点的指令 就完成了  

focus 这个名字是不固定的 可以自己起名字 

还有一点的就是 这个 指令的作用域只有当前组件 如果你想要全局都可以使用 那么需要全局注册

// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

而是用自定义命令的时机 就是 在Vue内置指令满足不了需求时, 可以自己定义使用

这样 当打开页面的时候 就会触发 获取焦点效果