dom元素下插入vue3组件

作者：▍看女人酒醒的疯癫。发布日期:2025-12-27 浏览:27

// 在 DOM 元素中插入 Vue 3 组件的示例代码

// 首先确保你已经引入了 Vue 3 库，可以通过 CDN 或 npm 安装。

// 假设我们有一个现有的 DOM 元素，例如：
<div id="app"></div>

// 然后我们可以创建一个 Vue 3 组件并将其挂载到这个 DOM 元素上：

// 1. 创建 Vue 应用实例
const app = Vue.createApp({});

// 2. 定义一个简单的 Vue 组件
app.component('my-component', {
  template: `<div>Hello from MyComponent!</div>`
});

// 3. 挂载应用到指定的 DOM 元素
app.mount('#app');

// 这段代码的作用是：
// - 创建了一个 Vue 3 应用实例。
// - 定义了一个名为 `my-component` 的组件，它包含一个简单的模板。
// - 将 Vue 应用挂载到 ID 为 `app` 的 DOM 元素上，这样 `my-component` 就会渲染在这个元素内部。

如果你在 HTML 文件中使用这段代码，确保你的 HTML 结构中有对应的 <div id="app"></div>，并且 Vue 3 已经正确引入。

上一篇：vue nprogress

下一篇：vue缓存