Web前端开发之VUE14——自定义指令、updated执行机制

言行物恒

已于 2022-04-20 16:30:10 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Web前端开发——Vue 文章标签：前端 vue node.js

于 2022-04-20 16:04:18 首次发布

本文链接：https://blog.youkuaiyun.com/HAC_SOUL/article/details/124294714

Web前端开发——Vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Vue中自定义指令的创建和应用，包括如何实现自动获取焦点的自定义指令，以及全局自定义指令的注册方法。同时，探讨了自定义指令的`updated`执行机制，帮助开发者深入理解Vue指令的工作原理。示例代码展示了在模板中使用自定义指令`v-focus`使输入框自动获取焦点的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义指令：

自动获取焦点的自定义指令示例代码：

<template>
  <input type="text" v-focus>
</template>
<script>
export default {
  directives:{
    focus:{
      mounted(el){
        el.focus()
      }
    }
  }
}
</script>

全局自定义指令：

示例代码：

app.directive('focus',{
  mounted(el){
    el.focus()
  }
})