vue3快速入门

// 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. 引入 Vue 3：使用 createApp 函数来创建一个新的 Vue 应用。
2. 定义组件：MyComponent 是一个简单的 Vue 组件，包含了一个模板、数据和方法。模板中使用了双大括号语法 ({{ }}) 来绑定数据，并通过 @click 绑定按钮的点击事件。
3. 创建应用实例：使用 createApp 函数传入组件定义，创建一个应用实例。
4. 挂载到 DOM：使用 mount 方法将应用挂载到指定的 DOM 元素（这里是 #app）。

这个示例展示了如何在 Vue 3 中创建一个简单的应用程序，包括定义组件、处理用户交互和数据绑定。