vue 3.0

// Vue 3.0 示例代码

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

// 定义一个简单的组件
const MyComponent = {
  template: `<div>
               <h1>{{ message }}</h1>
               <button @click="increment">Clicked {{ count }} times</button>
             </div>`,
  data() {
    return {
      message: 'Hello Vue 3.0!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// 创建 Vue 应用实例
const app = createApp(MyComponent);

// 挂载到 DOM 元素上
app.mount('#app');

解释说明：

• 引入 Vue 3.0：通过 import { createApp } from 'vue'; 来引入 Vue 3.0 的核心 API。
• 定义组件：使用对象字面量的方式定义了一个名为 MyComponent 的组件，包含模板、数据和方法。
• 创建应用实例：使用 createApp 方法创建一个新的 Vue 应用实例，并传入我们定义的组件。
• 挂载到 DOM：通过 app.mount('#app') 将应用实例挂载到 HTML 中具有 id="app" 的元素上。

这个示例展示了如何在 Vue 3.0 中创建一个简单的应用，包括定义组件、创建应用实例以及将其实例化并挂载到页面中。