效果图
博客教程:使用 Vue 构建简易个人主页界面
目录
- 前言
- 项目结构和准备
- HTML 与 CSS 布局
- Vue 数据绑定和渲染
- 功能实现
- 总结
前言
本教程将带你逐步使用 Vue.js 创建一个简易的“个人主页”界面。通过学习该项目,你将掌握 Vue 的基本数据绑定、指令的使用、事件绑定等知识。最终效果包括个人信息展示、常用功能及服务列表,适合初学者练习。
项目结构和准备
在开始前,确保项目结构简单并包含一个 HTML 文件即可:
- 创建一个
index.html
文件,并在文件头部引入 Vue 2 的 CDN。 - 我们将所有代码写在一个文件中,包括 HTML、CSS 和 JavaScript,以便快速测试和查看效果。
HTML 与 CSS 布局
第一步:HTML 结构
首先,我们定义 HTML 的基础结构,包括页面标题、头部、用户信息展示区、常用功能区、平台服务区、底部操作栏等。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页 - Vue 实现</title>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- Header -->
<div class="header">个人主页</div>
<!-- User Info Section -->
<div class="info">
<img :src="user.avatar" alt="User Avatar">
<div>
<div>{{ user.name }}</div>
<div>{{ user.description }}</div>
</div>
</div>
<!-- User Stats -->
<div class="stats">
<div>关注<br>{{ user.following }}</div>
<div>收藏<br>{{ user.collections }}</div>
<div>浏览<br>{{ user.views }}</div>
</div>
<!-- Functions Section -->
<div class="section-title">常用功能</div>
<div class="functions">
<div class="function-item" v-for="functionItem in functions" :key="functionItem.name">
<img :src="functionItem.icon" alt="" width="24">
<div>{{ functionItem.name }}</div>
</div>
</div>
<!-- Services Section -->
<div class="section-title">平台服务</div>
<div class="services">
<div class="service-item" v-for="service in services" :key="service.name">
<img :src="service.icon" alt="" width="24">
<div>{{ service.name }}</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="bottom-bar">
<div>我还没有贡献值</div>
<button @click="sendGift">送礼物</button>
</div>
</div>
</body>
</html>
第二步:CSS 样式
接下来,为页面添加基础样式,以使页面布局清晰美观。
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
display: flex;
justify-content: center;
padding: 20px;
}
#app {
max-width: 500px;
width: 100%;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.info {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.info img {
width: 60px;
height: 60px;
background-color: #f5f5f5;
border-radius: 50%;
margin-right: 15px;
}
.stats {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.stats div {
text-align: center;
font-size: 16px;
}
.section-title {
font-weight: bold;
margin-bottom: 10px;
}
.functions,
.services {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.function-item,
.service-item {
flex: 1 0 30%;
text-align: center;
padding: 10px;
border-radius: 8px;
background-color: #f5f5f5;
cursor: pointer;
}
.bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
margin-top: 20px;
}
.bottom-bar button {
background-color: #ff9100;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
border: none;
}
</style>
Vue 数据绑定和渲染
第三步:Vue 实例和数据
在 <script>
标签内创建一个 Vue 实例,定义页面的数据源,包括用户信息、常用功能、平台服务等。
<script>
new Vue({
el: '#app',
data: {
user: {
avatar: 'https://via.placeholder.com/60',
name: '打工战士',
description: '介绍下自己,获得更多关注',
following: 6,
collections: 5,
views: 12,
},
functions: [
{ name: '消息中心', icon: 'https://via.placeholder.com/24' },
{ name: '我的动态', icon: 'https://via.placeholder.com/24' },
{ name: '意见反馈', icon: 'https://via.placeholder.com/24' },
{ name: '设置', icon: 'https://via.placeholder.com/24' },
{ name: '推送管理', icon: 'https://via.placeholder.com/24' },
{ name: '深色模式', icon: 'https://via.placeholder.com/24' },
{ name: '清除缓存', icon: 'https://via.placeholder.com/24' },
],
services: [
{ name: '积分任务', icon: 'https://via.placeholder.com/24' },
{ name: '积分商城', icon: 'https://via.placeholder.com/24' },
{ name: '寻求报道', icon: 'https://via.placeholder.com/24' },
{ name: '我的开氪', icon: 'https://via.placeholder.com/24' },
]
},
methods: {
sendGift() {
alert('送礼物功能');
}
}
});
</script>
功能实现
- 头像和数据渲染:通过 Vue 的数据绑定功能,页面自动显示用户信息和功能图标。
- 事件绑定:在“送礼物”按钮上绑定点击事件,通过
sendGift
方法触发提示框。
总结
本教程演示了如何使用 Vue 和基础 HTML/CSS 构建一个个人主页。通过数据绑定和事件处理,页面实现了动态数据渲染和交互功能。
完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页 - Vue 实现</title>
<!-- 引用 Vue 2 的官方 CDN 版本 -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<style>
/* 样式代码 */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
display: flex;
justify-content: center;
padding: 20px;
}
#app {
max-width: 500px;
width: 100%;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.header {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.info {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.info img {
width: 60px;
height: 60px;
background-color: #f5f5f5;
border-radius: 50%;
margin-right: 15px;
}
.stats {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.stats div {
text-align: center;
font-size: 16px;
}
.section-title {
font-weight: bold;
margin-bottom: 10px;
}
.functions,
.services {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.function-item,
.service-item {
flex: 1 0 30%;
text-align: center;
padding: 10px;
border-radius: 8px;
background-color: #f5f5f5;
cursor: pointer;
}
.bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
margin-top: 20px;
}
.bottom-bar button {
background-color: #ff9100;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
border: none;
}
</style>
</head>
<body>
<div id="app">
<!-- Header Section -->
<div class="header">个人主页</div>
<!-- User Info -->
<div class="info">
<img :src="user.avatar" alt="User Avatar">
<div>
<div>{{ user.name }}</div>
<div>{{ user.description }}</div>
</div>
</div>
<!-- User Stats -->
<div class="stats">
<div>关注<br>{{ user.following }}</div>
<div>收藏<br>{{ user.collections }}</div>
<div>浏览<br>{{ user.views }}</div>
</div>
<!-- Common Functions -->
<div class="section-title">常用功能</div>
<div class="functions">
<div class="function-item" v-for="functionItem in functions" :key="functionItem.name">
<img :src="functionItem.icon" alt="" width="24">
<div>{{ functionItem.name }}</div>
</div>
</div>
<!-- Platform Services -->
<div class="section-title">平台服务</div>
<div class="services">
<div class="service-item" v-for="service in services" :key="service.name">
<img :src="service.icon" alt="" width="24">
<div>{{ service.name }}</div>
</div>
</div>
<!-- Bottom Bar with Action Button -->
<div class="bottom-bar">
<div>我还没有贡献值</div>
<button @click="sendGift">送礼物</button>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
user: {
avatar: 'https://via.placeholder.com/60',
name: '打工战士',
description: '介绍下自己,获得更多关注',
following: 6,
collections: 5,
views: 12,
},
functions: [
{ name: '消息中心', icon: 'https://via.placeholder.com/24' },
{ name: '我的动态', icon: 'https://via.placeholder.com/24' },
{ name: '意见反馈', icon: 'https://via.placeholder.com/24' },
{ name: '设置', icon: 'https://via.placeholder.com/24' },
{ name: '推送管理', icon: 'https://via.placeholder.com/24' },
{ name: '深色模式', icon: 'https://via.placeholder.com/24' },
{ name: '清除缓存', icon: 'https://via.placeholder.com/24' },
],
services: [
{ name: '积分任务', icon: 'https://via.placeholder.com/24' },
{ name: '积分商城', icon: 'https://via.placeholder.com/24' },
{ name: '寻求报道', icon: 'https://via.placeholder.com/24' },
{ name: '我的开氪', icon: 'https://via.placeholder.com/24' },
]
},
methods: {
sendGift() {
alert('送礼物功能');
}
}
});
</script>
</body>
</html>