vue3 指令

作者：一岁就很帅发布日期:2026-07-18 浏览:22

// Vue 3 指令示例代码

// 引入 Vue 并创建应用实例
import { createApp } from 'vue';

const app = createApp({});

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

// 定义组件
app.component('example-component', {
  template: `<input v-focus />`
});

// 挂载应用实例
app.mount('#app');

解释说明：

引入 Vue 并创建应用实例：使用 createApp 方法创建一个新的 Vue 应用实例。
注册全局自定义指令 v-focus：通过 app.directive 方法注册一个名为 v-focus 的全局指令。这个指令会在元素被插入到 DOM 时自动聚焦该元素。
定义组件：创建一个名为 example-component 的组件，并在模板中使用 v-focus 指令。
挂载应用实例：将应用实例挂载到页面上的 #app 元素。

这样，当页面加载时，输入框会自动获得焦点。

上一篇：npm install vue

下一篇：vue 动态加载组件