vue3 组件

<template>
  <div class="my-component">
    <h1>{{ message }}</h1>
    <button @click="increment">点击我</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义一个响应式变量
const message = ref('Hello Vue 3!');
const count = ref(0);

// 定义一个方法
function increment() {
  count.value++;
}
</script>

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

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

解释说明

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

   • 使用了 div 元素包裹整个组件的内容。
   • 使用了双大括号语法 {{ message }} 来绑定 message 变量的值。
   • 添加了一个按钮，绑定了 @click 事件，点击时调用 increment 方法。
   • 显示当前的计数值。

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

   • 使用了 Vue 3 的 <script setup> 语法糖，简化了组件的定义。
   • 导入了 ref 函数来创建响应式变量 message 和 count。
   • 定义了一个 increment 方法，用于增加 count 的值。

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

   • 使用了 scoped 样式，确保样式只作用于当前组件。
   • 简单设置了组件的布局和按钮样式。