vue3 component

// Vue 3 Component 示例代码

<template>
  <div class="my-component">
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">点击我</button>
    <p>你已经点击了按钮 {{ counter }} 次。</p>
  </div>
</template>

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

export default defineComponent({
  name: 'MyComponent',
  setup() {
    // 定义响应式数据
    const message = ref('欢迎来到 Vue 3 组件示例');
    const counter = ref(0);

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

    return {
      message,
      counter,
      incrementCounter,
    };
  },
});
</script>

<style scoped>
.my-component {
  text-align: center;
  margin-top: 50px;
}
</style>

解释说明：

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

   • 使用了简单的 HTML 结构，绑定了 message 和 counter 的值，并定义了一个按钮，点击按钮会调用 incrementCounter 方法。

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

   • 使用了 Vue 3 的 Composition API 来定义组件。
   • ref 用于创建响应式数据（如 message 和 counter）。
   • defineComponent 是一个辅助函数，帮助更好地定义组件结构。
   • setup 函数是 Composition API 的入口，返回的对象中的属性和方法可以在模板中使用。

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

   • 使用了 scoped 样式，确保样式只应用于当前组件。