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

who am I？ 6666

于 2022-08-04 17:34:00 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签：学习 vue.js javascript 前端 ecmascript

本文链接：https://blog.youkuaiyun.com/machine_vision123/article/details/129253537

自定义指令：对普通 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>

效果图：