notes/profile-card-app

Vue个人资料卡片学习示例

这是一个专为Vue初学者设计的实践项目，通过创建一个个人资料卡片来学习Vue.js的核心概念。

🎯 学习目标

通过这个项目，您将学会：

• Vue.js基础语法和概念
• 数据绑定和插值表达式
• 事件处理和方法定义
• 条件渲染和列表渲染
• 双向数据绑定
• 计算属性和监听器
• 组件生命周期

🚀 快速开始

1. 打开项目

   cd profile-card-app
   

2. 运行项目

   • 直接在浏览器中打开 index.html 文件
   • 或者使用本地服务器（推荐）：

   # 如果安装了Python
   python -m http.server 8000
   
   # 如果安装了Node.js
   npx serve .
   

3. 访问应用

   • 直接打开：双击 index.html
   • 本地服务器：访问 http://localhost:8000

📁 项目结构

profile-card-app/
├── index.html      # 主HTML文件
├── app.js          # Vue应用逻辑
├── style.css       # 样式文件
└── README.md       # 说明文档

🔧 功能特性

1. 个人资料展示

• 头像、姓名、职位显示
• 基本信息（年龄、城市、邮箱）
• 技能标签展示
• 个人简介

2. 交互功能

• 编辑资料：点击"编辑资料"按钮可以修改个人信息
• 主题切换：支持浅色/深色主题切换
• 数据持久化：主题设置会保存到本地存储

3. 响应式设计

• 适配不同屏幕尺寸
• 移动端友好的界面

📚 Vue概念学习

1. 数据绑定 (Data Binding)

<!-- 文本插值 -->
<h2>{{ profile.name }}</h2>

<!-- 属性绑定 -->
<img :src="profile.avatar" :alt="profile.name + '的头像'">

2. 事件处理 (Event Handling)

<!-- 点击事件 -->
<button @click="toggleEdit">编辑资料</button>
<button @click="toggleTheme">切换主题</button>

3. 条件渲染 (Conditional Rendering)

<!-- v-if 条件显示 -->
<div v-if="isEditing" class="edit-form">
    <!-- 编辑表单内容 -->
</div>

4. 列表渲染 (List Rendering)

<!-- v-for 循环显示 -->
<span v-for="skill in profile.skills" :key="skill" class="skill-tag">
    {{ skill }}
</span>

5. 双向绑定 (Two-way Binding)

<!-- v-model 双向绑定 -->
<input v-model="editProfile.name" type="text">
<input v-model.number="editProfile.age" type="number">

6. 计算属性 (Computed Properties)

computed: {
    ageGroup() {
        if (this.profile.age < 25) return '年轻有为';
        if (this.profile.age < 35) return '正值壮年';
        return '经验丰富';
    }
}

7. 监听器 (Watchers)

watch: {
    isDarkTheme(newValue) {
        localStorage.setItem('isDarkTheme', JSON.stringify(newValue));
    }
}

🎨 自定义建议

1. 修改个人信息

在 app.js 中找到 profile 对象，修改为您自己的信息：

profile: {
    name: '您的姓名',
    title: '您的职位',
    age: 您的年龄,
    city: '您的城市',
    email: '您的邮箱',
    avatar: '您的头像URL',
    bio: '您的个人简介',
    skills: ['技能1', '技能2', '技能3']
}

2. 添加新功能

尝试添加以下功能来练习Vue：

• 添加更多个人信息字段
• 实现头像上传功能
• 添加社交媒体链接
• 创建多个主题选项
• 添加动画效果

3. 样式定制

修改 style.css 中的颜色、字体、布局等：

• 更改主色调（搜索 #667eea 替换为您喜欢的颜色）
• 调整卡片大小和间距
• 添加新的动画效果

🐛 常见问题

Q: 为什么我的修改没有生效？

A: 确保您保存了文件，并刷新了浏览器页面。

Q: 如何查看Vue的调试信息？

A: 打开浏览器开发者工具（F12），查看Console标签页。

Q: 可以添加更多页面吗？

A: 当然可以！您可以创建更多HTML文件，或者学习Vue Router来实现单页应用。

📖 下一步学习

完成这个项目后，建议您：

1. 学习Vue组件化开发
2. 了解Vue CLI和现代开发工具
3. 学习Vue Router（路由）
4. 学习Vuex/Pinia（状态管理）
5. 尝试构建更复杂的项目

🤝 贡献

如果您有改进建议或发现了问题，欢迎：

• 提出Issue
• 提交Pull Request
• 分享您的学习心得

---

祝您学习愉快！ 🎉