vue.js 3

// Vue 3 示例代码

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

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

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

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

解释说明：

• createApp: Vue 3 中用于创建一个新的 Vue 应用实例。它替代了 Vue 2 中的 new Vue()。
• MyComponent: 定义了一个简单的 Vue 组件，包含模板、数据和方法。
• template: 组件的 HTML 模板，使用双大括号 {{ }} 进行数据绑定。
• data: 返回一个对象，包含组件的状态（如 message 和 counter）。
• methods: 定义组件的方法，这里有一个 incrementCounter 方法用于递增计数器。
• app.mount('#app'): 将应用挂载到页面中具有 id="app" 的 DOM 元素上。

希望这个示例能帮助你理解 Vue 3 的基本用法！