vue3入门

// Vue3 入门示例代码

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

// 定义一个简单的 Vue 组件
const App = {
  // 组件的数据
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  },
  // 组件的模板
  template: `
    <div>
      <h1>{{ message }}</h1>
      <button @click="changeMessage">Change Message</button>
    </div>
  `,
  // 方法
  methods: {
    changeMessage() {
      this.message = 'Vue 3 is awesome!';
    }
  }
};

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

解释说明：

1. 引入 Vue 库：使用 createApp 函数来创建一个新的 Vue 应用实例。
2. 定义组件：通过定义一个对象 App 来创建一个简单的 Vue 组件。这个对象包含了组件的数据、模板和方法。
3. 数据绑定：在模板中使用双大括号语法 {{ message }} 来绑定数据。
4. 事件处理：使用 @click 指令来绑定点击事件，调用 changeMessage 方法改变数据。
5. 挂载应用：最后通过 app.mount('#app') 将应用挂载到页面中的某个 DOM 元素上（例如 <div id="app"></div>）。