vue3.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 元素
app.mount('#app');

解释说明：

1. 引入 Vue 3.0：使用 createApp 函数来创建一个新的 Vue 应用实例。
2. 定义组件：通过定义 MyComponent 对象来创建一个简单的 Vue 组件。组件包含模板 (template)、数据 (data) 和方法 (methods)。
3. 创建应用实例：使用 createApp 函数传入组件，创建一个 Vue 应用实例。
4. 挂载应用：使用 app.mount('#app') 将应用挂载到 HTML 中的 #app 元素上。

这样，你就可以在页面中看到一个简单的 Vue 3.0 应用，显示 "Hello Vue 3.0!" 并且可以通过点击按钮来增加计数器的值。