camellia/notes

Fork 0

HP 4c7451db25 Initial commit

2025-06-25 19:21:02 +08:00

4.3 KiB

Raw Blame History

Vue个人资料卡片学习示例

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

🎯 学习目标

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

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

🚀 快速开始

打开项目
```
cd profile-card-app
```
运行项目
- 直接在浏览器中打开 index.html 文件
- 或者使用本地服务器（推荐）：
```
# 如果安装了Python
python -m http.server 8000

# 如果安装了Node.js
npx serve .
```
访问应用
- 直接打开：双击 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来实现单页应用。

📖 下一步学习

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

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

🤝 贡献

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

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

祝您学习愉快！ 🎉

4.3 KiB Raw Blame History Unescape Escape