vue使用教程

// main.js - 入口文件
import { createApp } from 'vue';
import App from './App.vue';

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

// 挂载到页面的 #app 元素上
app.mount('#app');

// 解释说明:
// 1. 使用 `createApp` 函数创建一个新的 Vue 应用实例。
// 2. 将创建的应用实例挂载到 HTML 中 id 为 `app` 的元素上，使 Vue 开始控制该元素的内容。

// App.vue - 根组件
<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">点击我</button>
    <p>你已经点击了 {{ counter }} 次</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎来到Vue世界!',
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

<!-- 解释说明:
1. `<template>` 标签定义了组件的 HTML 结构。
2. `{{ message }}` 和 `{{ counter }}` 是插值表达式，用于在模板中显示 JavaScript 表达式的值。
3. `@click` 是 v-on 指令的简写形式，用于监听 DOM 事件（如按钮点击）。
4. `data()` 函数返回一个对象，包含组件的状态数据。
5. `methods` 对象中定义了组件的方法，这里有一个 `incrementCounter` 方法，每次点击按钮时会调用它来增加计数器的值。 -->