法1 原生JS 方法

在页面的 mouted 钩子函数里面操作：document.querySelector('#inp').focus()

<template>
  <div>
    <input id="inp" type="text">
  </div>
</template>

<script>
export default {
  mounted() {
    document.querySelector('#inp').focus()
  }
}
</script>

法2 通过自定义指令--局部注册

在需要使用的页面操作 directives：{指令名：{inserted(el){}}}，然后插入 v-focus

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

<script>

export default {
   directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

法3 通过自定义指令--全局注册

第一步：main.js中全局注册自定义指令 Vue.directive('指令名'，{ inserted(el){}})

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//◆注册全局输入框聚焦的自定义指令
Vue.directive('focus', {
  // 钩子函数, 自动执行
  // 当 v-focus 绑定的标签被插入到真实 DOM 树上的时候执行
  // 钩子函数会接收到一个值: el -> 指令绑定的 DOM 元素
  inserted(el) {
    el.focus()
  }
})

new Vue({
  render: h => h(App)
}).$mount('#app')

第二步：可以在页面任何需要使用的地方，插入 v-focus

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