vue3js

// Vue 3 示例代码

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

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

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

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

// 解释说明:
// 1. `createApp` 是 Vue 3 中创建应用实例的方法。
// 2. `MyComponent` 是一个自定义组件，包含模板、数据和方法。
// 3. `data` 函数返回组件的状态对象。
// 4. `methods` 对象包含组件的方法，这里定义了一个 `increment` 方法来增加计数器。
// 5. 最后使用 `app.mount('#app')` 将应用挂载到 HTML 中的 #app 元素上。