vue自定义指令

作者：影之哀伤发布日期:2026-05-31 浏览:78

// 定义一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 使用自定义指令的示例组件
new Vue({
  el: '#example',
  data: {
    message: 'Hello!'
  }
})

<!-- HTML 模板 -->
<div id="example">
  <!-- 自定义指令 v-focus 会自动聚焦输入框 -->
  <input v-focus />
  <p>{{ message }}</p>
</div>

解释说明：

Vue.directive('focus', {...})：这里我们定义了一个全局自定义指令 v-focus。它会在元素插入到 DOM 后自动执行 inserted 钩子函数。
inserted 钩子函数：当元素被插入到 DOM 中时，inserted 钩子函数会被调用，并且传入该元素作为参数 (el)。在这个例子中，我们会调用 el.focus() 来让这个元素获得焦点。
使用自定义指令：在模板中，我们通过 <input v-focus /> 使用了这个自定义指令。页面加载后，输入框会自动获得焦点。

如果你需要更多关于 Vue 自定义指令的内容，请参考官方文档或提供更多具体需求。

上一篇：vue富文本编辑器

下一篇：vue3 富文本编辑器