基于 Vue.js 的个人资料卡片：代码实现和分析

应用场景

本代码用于创建一个基于 Vue.js 的个人资料卡片，可用于个人网站或其他需要显示个人信息和设置的应用程序中。

基本功能

该卡片包含以下功能：

显示用户姓名、头像、联系方式和地址等基本信息
提供导航链接，用于访问帐户设置、通知、隐私设置和帮助页面
可自定义用户数据，通过 ref() API 进行响应式更新

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

1. HTML 结构

<template>
  <div class="bg-gray-100">
    <!-- 用户信息 -->
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between py-4 border-b border-gray-200">
        <div class="flex items-center">
          <img
            class="w-10 h-10 rounded-full"
            src="https://source.unsplash.com/random/40x40"
            alt="User avatar"
          />
          <div class="ml-4">
            <h1 class="text-xl font-semibold">{{ user.name }}</h1>
            <p class="text-sm text-gray-500">{{ user.email }}</p>
          </div>
        </div>
        <div>
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
            Logout
          </button>
        </div>
      </div>

      <!-- 个人资料内容 -->
      <div class="grid grid-cols-12 gap-6 mt-8">
        <div class="col-span-8">
          <!-- 最新动态 -->
          <div class="bg-white shadow-md rounded-lg p-4">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-xl font-semibold">What's New</h2>
              <a href="#" class="text-sm text-blue-500">View All</a>
            </div>
            <div class="space-y-4">
              <!-- 动态列表 -->
              <div class="flex items-center" v-for="post in 3" :key="post">
                <img
                  class="w-16 h-16 rounded-full"
                  src="https://source.unsplash.com/random/32x32"
                  alt="User avatar"
                />
                <div class="ml-4">
                  <h3 class="text-base font-semibold">Lorem ipsum dolor sit amet</h3>
                  <p class="text-sm text-gray-500">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget
                    tortor risus. Cras ullamcorper massa sit amet lacus egestas, ac
                    ultrices nisi tincidunt.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <!-- 最新新闻 -->
          <div class="bg-white shadow-md rounded-lg p-4 mt-8">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-xl font-semibold">Latest News</h2>
              <a href="#" class="text-sm text-blue-500">View All</a>
            </div>
            <div class="space-y-4">
              <!-- 新闻列表 -->
              <div class="flex items-center" v-for="post in 3" :key="post">
                <img
                  class="w-16 h-16 rounded-full"
                  src="https://source.unsplash.com/random/32x32"
                  alt="User avatar"
                />
                <div class="ml-4">
                  <h3 class="text-base font-semibold">Lorem ipsum dolor sit amet</h3>
                  <p class="text-sm text-gray-500">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget
                    tortor risus. Cras ullamcorper massa sit amet lacus egestas, ac
                    ultrices nisi tincidunt.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人信息 -->
        <div class="col-span-4">
          <div class="bg-white shadow-md rounded-lg p-4">
            <h2 class="text-xl font-semibold mb-4">Your Profile</h2>
            <div class="flex items-center">
              <img
                class="w-24 h-24 rounded-full"
                src="https://source.unsplash.com/random/48x48"
                alt="User avatar"
              />
              <div class="ml-4">
                <h3 class="text-base font-semibold">{{ user.name }}</h3>
                <p class="text-sm text-gray-500">{{ user.email }}</p>
              </div>
            </div>
            <div class="mt-4">
              <!-- 个人信息列表 -->
              <ul class="space-y-2">
                <li>
                  <span class="font-semibold">Email:</span>
                  <span>{{ user.email }}</span>
                </li>
                <li>
                  <span class="font-semibold">Phone:</span>
                  <span>{{ user.phone }}</span>
                </li>
                <li>
                  <span class="font-semibold">Address:</span>
                  <span>{{ user.address }}</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- 设置 -->
          <div class="bg-white shadow-md rounded-lg p-4 mt-8">
            <h2 class="text-xl font-semibold mb-4">Settings</h2>
            <ul class="space-y-2">
              <!-- 设置列表 -->
              <li>
                <a href="#" class="text-base font-semibold">Account</a>
              </li>
              <li>
                <a href="#" class="text-base font-semibold">Notifications</a>
              </li>
              <li>
                <a href="#" class="text-base font-semibold">Privacy</a>
              </li>
              <li>
                <a href="#" class="text-base font-semibold">Help</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

该 HTML 结构定义了卡片的布局和内容，包括用户详细信息、个人资料内容（最新动态和最新新闻）以及个人信息和设置。

2. Vue.js 脚本

<script lang="tsx" setup>
import { ref } from "vue";

const user = ref({
  name: "John Doe",
  email: "john.doe@example.com",
  phone: "0123456789",
  address: "123 Main Street, Anytown, CA 12345",
});
</script>

该脚本使用 Vue.js 的 ref() API 创建了一个响应式的 user 对象，用于存储和管理用户数据。

3. CSS 样式

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.bg-white {
  background-color: #fff;
}

.shadow-md {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.rounded-lg {
  border-radius: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-xl {
  font-size: 1.25rem;
}

.font-semibold {
  font-weight: 600;
}

.text-sm {
  font-size: 0.875rem;
}

.text-gray-500 {
  color: #6b7280;
}

.space-y-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.h

ECHO recommendation

ScriptEcho.ai