vue3组件

<template>
  <div>
    <!-- 这是一个简单的 Vue 3 组件示例 -->
    <h1>{{ message }}</h1>
    <button @click="increment">点击我</button>
    <p>点击次数: {{ count }}</p>
  </div>
</template>

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

export default {
  name: 'MyComponent',
  setup() {
    // 定义一个响应式变量 message
    const message = ref('Hello Vue 3!');

    // 定义一个响应式变量 count
    const count = ref(0);

    // 定义一个方法 increment，用于增加 count 的值
    const increment = () => {
      count.value++;
    };

    // 返回需要在模板中使用的变量和方法
    return {
      message,
      count,
      increment
    };
  }
};
</script>

<style scoped>
/* 简单的样式 */
div {
  text-align: center;
  margin-top: 50px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

解释说明

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

   • 使用了基本的 HTML 标签来构建组件的结构。
   • {{ message }} 和 {{ count }} 是插值表达式，用于显示响应式数据。
   • <button @click="increment">点击我</button> 绑定了一个点击事件，当按钮被点击时会调用 increment 方法。

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

   • 导入了 Vue 3 提供的 ref 和 reactive 函数。
   • setup() 函数是 Vue 3 中新的组合式 API 入口点。
   • message 和 count 是通过 ref 创建的响应式变量。
   • increment 是一个普通函数，用于更新 count 的值。
   • return 语句返回了需要在模板中使用的变量和方法。

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

   • 使用了 CSS 来设置组件的样式。
   • scoped 属性确保这些样式只应用于当前组件。