vue directive

作者：终生卟离发布日期:2026-04-03 浏览:47

// Vue 指令示例代码

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

// 使用 v-focus 指令，在页面加载时自动聚焦输入框
new Vue({
  el: '#app',
  template: '<input v-focus />'
})

解释说明：

Vue.directive('focus', {...})：注册一个全局自定义指令 v-focus。这个指令会在元素插入 DOM 后自动触发。
inserted 钩子函数：当指令所在的元素被插入到 DOM 中时调用。在这个例子中，它会调用 el.focus() 来让元素获得焦点。
使用 v-focus：在模板中通过 <input v-focus /> 使用该指令，使得页面加载时输入框自动获得焦点。

如果你需要更复杂的逻辑，可以在指令的不同钩子函数中添加更多的处理逻辑。

上一篇：vue 学习

下一篇：vue 动态路由