vue3项目案例

<template>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  name: 'App',
  setup() {
    // 定义响应式数据
    const message = ref('Hello Vue 3!');
    const count = ref(0);

    // 定义方法
    const increment = () => {
      count.value++;
    };

    return {
      message,
      count,
      increment
    };
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了两个插值表达式 {{ message }} 和 {{ count }} 来显示数据。
   • 一个按钮，点击时会触发 increment 方法，增加 count 的值。

2. 脚本部分 (<script>):

   • 使用 ref 创建了两个响应式数据：message 和 count。
   • setup 函数是 Composition API 的入口，返回的对象中的属性和方法可以在模板中使用。
   • increment 方法用于递增 count 的值。

3. 样式部分 (<style>):

   • 简单的样式定义，使页面居中对齐并设置字体等基本样式。