学习-vue3 自定义指令，帮助理解的简单demo

自定义指令：对普通 DOM 元素进行底层操作。

v-focus指令：（main.js中注册全局自定义指令）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
// 注册一个全局自定义指令'v-focus'
app.directive('focus', {
  // 当被绑定的元素挂载到DOM中时
  mounted (el) {
    // 聚焦元素
    el.focus()
  }
})

app.use(store).use(router).mount('#app')

模板中使用：

<template>
  <div>
    <input v-focus />
  </div>
</template>

<script>
export default {

  data () {
    return {

    }
  }
}
</script>

<style lang="scss"></style>

效果图：