使用 Vue 构建一个个人资料卡片

应用场景介绍

个人资料卡片是一种在各种应用程序中广泛使用的组件，它以简洁易懂的方式展示个人信息。它通常包含个人资料图片、姓名、联系方式、技能和兴趣等信息。

代码基本功能介绍

本文提供的代码演示了一个使用 Vue 构建的个人资料卡片。它具有以下功能：

展示个人资料图片、姓名、课程数量、完成率和证书数量。
列出正在进行的课程，并提供一个按钮继续学习。
提供一个按钮查看所有课程。

功能实现步骤及关键代码分析

1. 模板定义

<template>
  <div class="flex flex-col items-center justify-center w-full h-full bg-gray-100">
    <!-- ... -->
  </div>
</template>

这个模板定义了卡片的整体结构，包括一个垂直排列的容器，其中包含各种子组件。

2. 数据绑定

const courses = ref([
  {
    image: 'https://source.unsplash.com/random/100x100',
    title: 'Making a Beautiful Scene with New People, Created by Senior Illustrator',
  },
])

courses是一个响应式数组，用于存储正在进行的课程数据。ref()函数用于创建响应式变量。

3. 个人资料信息显示

<div class="flex items-center justify-between p-4 mb-4 text-gray-500 border-b border-gray-200">
  <!-- ... -->
</div>

这个部分显示个人资料图片、姓名、课程数量、完成率和证书数量。它使用插值表达式将数据绑定到 DOM 元素中。

4. 课程列表

<div class="mb-8">
  <h2 class="text-xl font-semibold text-gray-700 mb-4">
    Courses in Progress
  </h2>
  <div class="flex flex-col">
    <!-- ... -->
  </div>
</div>

这个部分列出正在进行的课程。它使用 v-for 指令循环遍历 courses 数组，并为每个课程创建一个子组件。

5. 继续学习按钮

<button
  class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
  Continue
</button>

这个按钮允许用户继续正在进行的课程。它使用 @click 事件处理程序触发一个自定义事件，该事件可以在父组件中处理。

6. 查看所有课程按钮

<div class="flex items-center justify-center">
  <button
    class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
  >
    View All Courses
  </button>
</div>

这个按钮允许用户查看所有课程。它使用 @click 事件处理程序触发一个自定义事件，该事件可以在父组件中处理。

总结与展望

开发这个个人资料卡片的过程让我对 Vue 的响应式系统和组件化开发有了更深入的理解。未来，该卡片功能可以进一步扩展和优化，例如：

添加对社交媒体链接和联系信息的支持。
实现课程过滤和排序功能。
使用动画效果增强用户体验。

ECHO recommendation

ScriptEcho.ai