个人资料卡片：打造一个交互式且信息丰富的展示页面

应用场景介绍

个人资料卡片是一种常见的 UI 元素，用于在网站或应用程序中展示个人信息。它通常包含个人照片、姓名、职业、技能、经验、教育、项目和联系方式等信息。

代码基本功能介绍

此代码示例展示了一个个人资料卡片，其中包含以下功能：

• 用户个人资料信息，包括姓名、职业、头像等
• 技能列表，可视化显示每个技能的熟练程度
• 经验列表，包括职位、公司和工作年限
• 教育列表，包括学位、大学和学习年限
• 项目列表，包括项目名称和简要描述
• 联系方式，包括电子邮件、电话号码和地址

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

1. 设置数据

首先，在<script>标签中定义了用于填充卡片的反应式数据。这些数据包括技能、经验、教育、项目和联系方式。

const skills = ref([
  {
    name: "HTML",
    proficiency: 90,
  },
  {
    name: "CSS",
    proficiency: 80,
  },
  {
    name: "JavaScript",
    proficiency: 70,
  },
]);

const experience = ref([
  {
    title: "Software Engineer",
    company: "Google",
    years: "2020 - Present",
  },
]);

const education = ref([
  {
    degree: "Computer Science",
    university: "Stanford University",
    years: "2016 - 2020",
  },
]);

const projects = ref([
  {
    name: "Personal Website",
    description: "A personal website showcasing my skills and projects.",
  },
  {
    name: "E-commerce Website",
    description: "An e-commerce website for selling clothes.",
  },
  {
    name: "Mobile App",
    description: "A mobile app for tracking fitness activity.",
  },
]);

const contact = ref({
  email: "username@example.com",
  phone: "0123456789",
  address: "123 Main Street, Anytown, CA 12345",
});

2. 渲染个人资料信息

在<template>标签中，使用 Vue.js 的插值功能渲染个人资料信息，包括姓名、职业和头像。

<h1 class="text-2xl font-bold text-gray-900">{{ name }}</h1>
<p class="text-sm text-gray-600">{{ occupation }}</p>
<img
  class="w-20 h-20 rounded-full mr-4"
  src="{{ avatar }}"
  alt="Profile picture"
/>

3. 渲染技能列表

技能列表使用 Vue.js 的 v-for 指令遍历 skills 数组，并为每个技能渲染一个圆点和技能名称。

<div class="mt-6">
  <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold text-gray-900">Skills</h3>
    <van-icon name="edit" size="16px" color="#606266" />
  </div>
  <div class="mt-4">
    <div class="flex items-center" v-for="skill in skills" :key="skill.name">
      <div class="w-2 h-2 rounded-full bg-purple-500 mr-2" />
      <p class="text-sm text-gray-600">{{ skill.name }}</p>
    </div>
  </div>
</div>

4. 渲染经验列表

经验列表也使用 v-for 指令遍历 experience 数组，并为每个经验渲染一个项目。

<div class="mt-6">
  <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold text-gray-900">Experience</h3>
    <van-icon name="edit" size="16px" color="#606266" />
  </div>
  <div class="mt-4">
    <div class="flex items-center" v-for="exp in experience" :key="exp.title">
      <div class="w-2 h-2 rounded-full bg-purple-500 mr-2" />
      <p class="text-sm text-gray-600">{{ exp.title }}</p>
    </div>
  </div>
</div>

5. 渲染教育列表

教育列表与经验列表类似，使用 v-for 指令遍历 education 数组渲染教育信息。

<div class="mt-6">
  <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold text-gray-900">Education</h3>
    <van-icon name="edit" size="16px" color="#606266" />
  </div>
  <div class="mt-4">
    <div class="flex items-center" v-for="edu in education" :key="edu.degree">
      <div class="w-2 h-2 rounded-full bg-purple-500 mr-2" />
      <p class="text-sm text-gray-600">{{ edu.degree }}</p>
    </div>
  </div>
</div>

6. 渲染项目列表

项目列表也使用 v-for 指令遍历 projects 数组，并为每个项目渲染一个项目名称和简要描述。

<div class="mt-6">
  <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold text-gray-900">Projects</h3>
    <van-icon name="edit" size="16px" color="#606266" />
  </div>
  <div class="mt-4">
    <div class="flex items-center" v-for="project in projects" :key="project.name">
      <div class="w-2 h-2 rounded-full bg-purple-500 mr-2" />
      <p class="text-sm text-gray-600">{{ project.name }}</p>
    </div>
  </div>
</div>

7. 渲染联系方式

联系方式使用 Vue.js 的插值功能渲染，包括电子邮件、电话号码和地址。

<div class="mt-6">
  <div class="flex items-center justify-between">
    <h3 class="text-lg font-semibold text-gray-900">Contact</h3>
    <van-icon name="edit" size="16px" color="#606266" />
  </div>
  <div class="mt-4">
    <div class="flex items-center">
      <div class="w-2 h-2 rounded-full bg-purple-500 mr-2" />
      <p class="text-sm text-gray-600">Email: {{ email }}</p>
    </div>
    <div class="flex items-center">
      <div class="w-2 h-2 rounded-full bg-purple-500 mr-2" />
      <p class="text-sm text-gray-600">Phone: {{ phone }}</p>
    </div>
    <div class="flex items-center">
      <div class="w-2 h-2 rounded-full bg-purple-500 mr-2" />
      <p class="text-sm text-gray-600">
        Address: {{ address }}
      </p>
    </div>
  </div>
</div>

总结与展望

开发这段代码过程中的经验与收获：

• 熟悉 Vue.js 的基本语法和功能，包括响应式数据、v-for 指令和插值。
• 了解了如何使用 Vue.js 渲染动态列表和复杂组件。
• 提高了对 CSS 样式和布局的理解。

未来该卡片功能的拓展与优化：

• 添加社交媒体链接
• 允许用户编辑和更新他们的信息
• 整合第三方服务，如 Google Analytics，以跟踪卡片的性能
• 优化卡片的响应式设计，使其在不同设备上都能良好显示