vue 自定义指令

作者：花小泽ノ发布日期:2026-07-19 浏览:61

// 自定义指令示例代码

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

// 在组件中使用自定义指令
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  template: `<div>
               <p>{{ message }}</p>
               <input v-focus />
             </div>`
})

解释说明：

注册全局自定义指令：
- 使用 Vue.directive 方法可以注册一个全局自定义指令。这里我们注册了一个名为 v-focus 的指令。
指令钩子函数：
- inserted 钩子函数在指令所在的元素插入到 DOM 后调用。在这个例子中，它会调用 el.focus() 方法来自动聚焦输入框。
使用自定义指令：
- 在模板中使用 v-focus 指令，当页面加载完成并且输入框插入到 DOM 后，输入框会自动获得焦点。
组件实例：
- 创建一个新的 Vue 实例，并将模板挂载到 #app 元素上。模板中包含了一个带有 v-focus 指令的输入框和一个显示消息的段落。

上一篇：vue刷新当前页面

下一篇：vue keepalive