vue3 demo

<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() {
    // 定义一个响应式变量 message
    const message = ref('Hello Vue 3!');

    // 定义一个响应式状态对象
    const state = reactive({
      count: 0
    });

    // 定义一个方法来增加计数
    const increment = () => {
      state.count++;
    };

    // 返回需要在模板中使用的变量和方法
    return {
      message,
      count: state.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 }} 来显示数据。
   • 绑定了一个点击事件 @click="increment" 到按钮上，点击按钮时会调用 increment 方法。

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

   • 导入了 Vue 3 的 ref 和 reactive 函数。
   • 使用 ref 创建了一个响应式的 message 变量。
   • 使用 reactive 创建了一个响应式的 state 对象，包含一个 count 属性。
   • 定义了一个 increment 方法，用于递增 count 的值。
   • 在 setup 函数中返回了需要在模板中使用的变量和方法。

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

   • 添加了一些简单的样式来美化页面。