零基础 Vue 入门：个人主页完整示例教程” “Vue 实战：构建简洁美观的个人主页界面” “从零开始使用 Vue 构建个人主页，包含详细代码解析”

news2024/11/26 10:49:44

效果图

在这里插入图片描述

博客教程：使用 Vue 构建简易个人主页界面

目录
  1. 前言
  2. 项目结构和准备
  3. HTML 与 CSS 布局
  4. Vue 数据绑定和渲染
  5. 功能实现
  6. 总结

前言

本教程将带你逐步使用 Vue.js 创建一个简易的“个人主页”界面。通过学习该项目，你将掌握 Vue 的基本数据绑定、指令的使用、事件绑定等知识。最终效果包括个人信息展示、常用功能及服务列表，适合初学者练习。

项目结构和准备

在开始前，确保项目结构简单并包含一个 HTML 文件即可：

  1. 创建一个 index.html 文件，并在文件头部引入 Vue 2 的 CDN。
  2. 我们将所有代码写在一个文件中，包括 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2235097.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

（二）基于Bayes方法的道路分割

（二）基于Bayes方法的道路分割

一、实验目的 1、实验目标 学习掌握Bayes定理&#xff08;Bayes Theorem&#xff09;的基本原理及推导过程&#xff0c;以及公式中的先验概率、条件概率、后验概率、相似度等概念。在MATLAB的概率分布函数基础上&#xff0c;通过编写程序&#xff0c;实现图像块内结果统计和序…
阅读更多...
从新手到专家：7款电脑平面设计软件评测

从新手到专家：7款电脑平面设计软件评测

平面设计在时尚、广告等多个领域扮演着重要角色&#xff0c;而创作出独特且富有创意的设计作品则需要依赖优秀的电脑平面设计软件。市场上的电脑平面设计软件众多&#xff0c;每款软件都有其独到之处。本文将为你推荐几款值得关注的电脑平面设计软件&#xff0c;并分析它们的特…
阅读更多...
Django安装

Django安装

在终端创建django项目 1.查看自己的python版本 输入对应自己本机python的版本&#xff0c;列如我的是3.11.8 先再全局安装django依赖包 2.在控制窗口输入安装命令&#xff1a; pip3.11 install django 看到Successflully 说明我们就安装成功了 python的Scripts文件用于存…
阅读更多...
elementui中的新增弹窗在新增数据成功后再新增 发现数据无法清除解决方法

elementui中的新增弹窗在新增数据成功后再新增 发现数据无法清除解决方法

elementui中的新增弹窗在新增数据成功后再新增 发现数据无法清除解决方法 试过网上其他方法&#xff0c;发现表单清空数据还是有问题&#xff0c;索性用下面方法解决: // 给弹框里面添加 v-ifvisible测试无问题&#xff0c;暂时先这样解决&#xff0c;如果有其他方法&#x…
阅读更多...
计算机网络——路由器构成

计算机网络——路由器构成

算路由表是分布式去算——你算你的&#xff0c;我算我的 输出队列非先来先传 调度发生在哪里 缓存队列一般是应对——来数据方向的速度过快问题
阅读更多...
PMP–一、二、三模、冲刺–分类–7.成本管理–技巧–挣值分析

PMP–一、二、三模、冲刺–分类–7.成本管理–技巧–挣值分析

文章目录 技巧一模7.成本管理--4.控制成本--数据分析--挣值分析--进度绩效指数&#xff08;SPI&#xff09;是测量进度效率的一种指标&#xff0c;表示为挣值与计划价值之比&#xff0c;反映了项目团队完成工作的效率。 当 SPI小于 1.0 时&#xff0c;说明已完成的工作量未达到…
阅读更多...
CentOS 7 更换软件仓库

CentOS 7 更换软件仓库

CentOS 7 于2024年6月30日停止维护&#xff0c;官方仓库已经没有软件了&#xff0c;想要继续使用 &#xff0c;需要更换软件仓库&#xff0c;这里更换到阿里云的软件仓库 https://developer.aliyun.com/mirror/ 查看目前可用的软件数量 yum repolist 更换软件仓库&#xff1a…
阅读更多...
Dermaseptin；抗菌肽；皮抑菌肽；ALWKTMLKKLGTMALHAGKAALGAAADTISQGTQ；136212-91-4

Dermaseptin；抗菌肽；皮抑菌肽；ALWKTMLKKLGTMALHAGKAALGAAADTISQGTQ；136212-91-4

【Dermaseptin 简介】 Dermaseptin&#xff0c;也被称为皮抑菌肽&#xff0c;是一类由蛙类皮肤分泌的多阳离子抗菌肽&#xff0c;主要存在于树蛙科&#xff08;Hylid frogs&#xff09;的蛙类&#xff0c;特别是 Agalychnis 和 Phyllomedusa 属的蛙类。它具有显著的抗菌活性&a…
阅读更多...
在培训班学网络安全有用吗

在培训班学网络安全有用吗

在当今数字化时代&#xff0c;网络安全问题日益凸显&#xff0c;成为了企业和个人关注的焦点。随着对网络安全人才需求的不断增长&#xff0c;各种网络安全培训班也如雨后春笋般涌现。然而&#xff0c;在培训班学网络安全真的有用吗? 一、网络安全的重要性与挑战 1. 信息时代的…
阅读更多...
微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems

微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems

4.7 Applied Optimization Problems - Calculus Volume 1 | OpenStax
阅读更多...
绿色能源发展关键：优化风电运维体系

绿色能源发展关键：优化风电运维体系

根据QYResearch调研团队最新发布的《全球风电运维市场报告2023-2029》显示&#xff0c;预计到2029年&#xff0c;全球风电运维市场的规模将攀升至307.8亿美元&#xff0c;并且在接下来的几年里&#xff0c;其年复合增长率&#xff08;CAGR&#xff09;将达到12.5%。 上述图表及…
阅读更多...
软件工程笔记一

软件工程笔记一

目录 软件的概念、特性和分类 软件与程序 软件的特性 软件的分类 软件危机与软件工程 软件危机 如何摆脱软件危机? 软件工程概念的提出 什么是软件工程&#xff1f; 软件工程的若干定义 系统工程的目标 软件工程的基本原理 软件工程的目标 软件的质量特性 软件生存…
阅读更多...
【数据结构】线性表——顺序表

【数据结构】线性表——顺序表

文章目录 一、线性表二、顺序表2.1概念及结构2.2、顺序表接口实现2.2.1、顺序表的动态存储2.2.2、顺序表初始化2.2.3、检查空间判断进行增容2.2.4、顺序表尾插、尾删2.2.5、顺序表头插、头删2.2.6、顺序表查找2.2.7、顺序表在pos位置插入x2.2.8、顺序表删除pos位置的值2.2.9、顺…
阅读更多...
stable diffusion 大模型

stable diffusion 大模型

本节内容&#xff0c;给大家带来的是stable diffusion的基础模型课程。基础模型&#xff0c;我们有时候也称之为大模型。在之前的课程中&#xff0c;我们已经多次探讨过大模型&#xff0c;并且也见识过一些大模型绘制图片的独特风格&#xff0c;相信大家对stable diffusion大模…
阅读更多...
ChatPaper.ai：研究生文献阅读的AI助手利器

ChatPaper.ai：研究生文献阅读的AI助手利器

为什么选择 ChatPaper.ai&#xff1f; 作为研究生&#xff0c;我们每天都面临着大量文献阅读的挑战。一篇关键论文往往需要反复阅读数小时&#xff0c;还要做笔记、提取要点、理解创新点&#xff0c;这个过程既耗时又费力。ChatPaper.ai&#xff08;ChatPaper.ai - Chat with …
阅读更多...
python-docx -- 读取word图片

python-docx -- 读取word图片

文章目录 概念介绍形状对象读取图片自定义图形 概念介绍 从概念上来讲&#xff0c;word文档分为两层&#xff0c;一个文本层&#xff0c;一个绘画层&#xff1b; 文本层&#xff0c;从上到下&#xff0c;从左到右&#xff0c;流式排版&#xff0c;本页填满则开启新页面&#…
阅读更多...
Python邮差：如何用代码精确投递商品快递费用的密信

Python邮差：如何用代码精确投递商品快递费用的密信

目录 一、准备工作 二、编写API请求脚本 三、解析与处理快递费用数据 四、案例应用&#xff1a;模拟电商平台的快递费用计算 五、自动化邮件通知 六、总结 在电子商务的广阔天地里&#xff0c;精确计算并快速传递商品快递费用是一项至关重要的任务。作为Python邮差&#…
阅读更多...
swoole扩展安装--入门篇

swoole扩展安装--入门篇

对于php来说&#xff0c;swoole是个强大的补充扩展。这是我第3次写swoole扩展安装&#xff0c;这次基于opencloudos8系统&#xff0c;php使用8.2。 安装swoole扩展首先想到的是用宝塔来安装&#xff0c;毕竟安装方便&#xff0c;还能统一管理。虽然获得swoole版本不是最新的&am…
阅读更多...
Linux信号_信号的保存

Linux信号_信号的保存

我们知道向进程发送信号&#xff0c;进程并不是立即处理&#xff0c;而是等合适的时机进行处理。那么就需要保存信号。在信号的产生中说过信号保存在进程PCB里面的信号位图里&#xff0c;那信号位图到底是什么&#xff1f; 一.信号保存 我们先补充一些概念 1.阻塞 忽略概念 实…
阅读更多...
如何使用示波器测量信号强度

如何使用示波器测量信号强度

示波器是一种用于观察和分析电信号的电子测试仪器。它可以显示信号的波形、幅度、频率和其他特性&#xff0c;是工程师和技术人员进行电路设计、调试和故障排除的重要工具。本文将详细介绍如何使用示波器测量信号强度。 一、认识示波器的基本组成部分 显示屏&#xff1a;用于显…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023