188 lines
4.3 KiB
Markdown
188 lines
4.3 KiB
Markdown
# 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
|
||
- 分享您的学习心得
|
||
|
||
---
|
||
|
||
**祝您学习愉快！** 🎉
|