vue3框架

// Vue 3 示例代码

// 引入 Vue 3
import { createApp } from 'vue';

// 定义一个简单的组件
const App = {
  // 组件的模板
  template: `
    <div>
      <h1>{{ message }}</h1>
      <button @click="increment">点击我</button>
      <p>计数: {{ count }}</p>
    </div>
  `,
  // 组件的数据
  data() {
    return {
      message: '欢迎使用 Vue 3!',
      count: 0
    };
  },
  // 方法
  methods: {
    increment() {
      this.count++;
    }
  }
};

// 创建 Vue 应用实例并挂载到 DOM
const app = createApp(App);
app.mount('#app');

解释说明：

1. 引入 Vue 3：通过 import { createApp } from 'vue'; 引入 Vue 3 的核心函数 createApp。
2. 定义组件：创建一个名为 App 的组件，包含模板、数据和方法。
   • template：定义组件的 HTML 模板。
   • data：返回一个对象，包含组件的状态（如 message 和 count）。
   • methods：定义组件的方法（如 increment 方法用于增加计数）。
3. 创建应用实例并挂载：使用 createApp(App) 创建一个 Vue 应用实例，并通过 app.mount('#app') 将其挂载到页面中具有 id="app" 的 DOM 元素上。

这样就可以在页面上看到一个简单的 Vue 3 应用，显示欢迎信息和一个可以点击的按钮来增加计数。