# Vue个人资料卡片学习示例

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

## 🎯 学习目标

通过这个项目，您将学会：
- Vue.js基础语法和概念
- 数据绑定和插值表达式
- 事件处理和方法定义
- 条件渲染和列表渲染
- 双向数据绑定
- 计算属性和监听器
- 组件生命周期

## 🚀 快速开始

1. **打开项目**
   ```bash
   cd profile-card-app
   ```

2. **运行项目**
   - 直接在浏览器中打开 `index.html` 文件
   - 或者使用本地服务器（推荐）：
   ```bash
   # 如果安装了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)
```html
<!-- 文本插值 -->
<h2>{{ profile.name }}</h2>

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

### 2. 事件处理 (Event Handling)
```html
<!-- 点击事件 -->
<button @click="toggleEdit">编辑资料</button>
<button @click="toggleTheme">切换主题</button>
```

### 3. 条件渲染 (Conditional Rendering)
```html
<!-- v-if 条件显示 -->
<div v-if="isEditing" class="edit-form">
    <!-- 编辑表单内容 -->
</div>
```

### 4. 列表渲染 (List Rendering)
```html
<!-- v-for 循环显示 -->
<span v-for="skill in profile.skills" :key="skill" class="skill-tag">
    {{ skill }}
</span>
```

### 5. 双向绑定 (Two-way Binding)
```html
<!-- v-model 双向绑定 -->
<input v-model="editProfile.name" type="text">
<input v-model.number="editProfile.age" type="number">
```

### 6. 计算属性 (Computed Properties)
```javascript
computed: {
    ageGroup() {
        if (this.profile.age < 25) return '年轻有为';
        if (this.profile.age < 35) return '正值壮年';
        return '经验丰富';
    }
}
```

### 7. 监听器 (Watchers)
```javascript
watch: {
    isDarkTheme(newValue) {
        localStorage.setItem('isDarkTheme', JSON.stringify(newValue));
    }
}
```

## 🎨 自定义建议

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

```javascript
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
- 分享您的学习心得

---

**祝您学习愉快！** 🎉