vue3.2

作者：狂拽今生发布日期:2026-02-06 浏览:107
// Vue 3.2 示例代码

// 引入 Vue 和创建应用实例
import { createApp } from 'vue';

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

// 创建 Vue 应用并挂载到 DOM 元素上
const app = createApp(MyComponent);
app.mount('#app');

// 解释说明：
// 1. 使用 `createApp` 函数创建一个新的 Vue 应用实例。
// 2. 定义了一个名为 `MyComponent` 的组件，包含模板、数据和方法。
// 3. 组件的模板中使用了插值表达式（{{}}）来显示数据，并绑定了一个点击事件。
// 4. 最后将应用挂载到具有 id 为 `app` 的 DOM 元素上。
上一篇：vue3 ts
下一篇：layui vue