Vue2 排行榜页面实战：从零开始构建完整排行榜界面，新手也能轻松掌握！|一步步带你用 Vue2 打造酷炫排行榜页面，适合新手的完整教程与源代码|前端新手必看：用 Vue2 快速实现 CSDN排行榜-CSDN博客

本文链接：https://blog.csdn.net/qq_22182989/article/details/142604833

b站视频演示效果：

效果图：

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSDN 排行榜</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
  }

  .header {
    background-color: #ffffff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header-logo {
    display: flex;
    align-items: center;
  }

  .header-logo img {
    height: 30px;
    margin-right: 10px;
  }

  .header-menu {
    display: flex;
    gap: 20px;
  }

  .header-menu a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
  }

  .main-container {
    display: flex;
    padding: 20px;
  }

  .sidebar {
    width: 250px;
    background-color: #fff;
    border-right: 1px solid #eee;
    padding: 15px;
  }

  .sidebar-item {
    margin-bottom: 10px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
  }

  .sidebar-item.active {
    font-weight: bold;
    color: #ff5722;
  }

  .content {
    flex-grow: 1;
    padding: 15px;
    background-color: #fff;
    margin-left: 20px;
  }

  .ranking-header {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }

  .ranking-list {
    list-style: none;
    padding: 0;
  }

  .ranking-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }

  .ranking-number {
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
    color: #ff5722;
  }

  .ranking-content {
    flex-grow: 1;
  }

  .ranking-content h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
  }

  .ranking-content p {
    margin: 5px 0;
    font-size: 14px;
    color: #888;
  }

  .ranking-action {
    display: flex;
    align-items: center;
  }

  .follow-button {
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    background-color: #ff5722;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
</head>
<body>
<div id="app">
  <!-- Header -->
  <div class="header">
    <div class="header-logo">
      <img src="https://www.csdn.net/favicon.ico" alt="CSDN Logo">
      <span>CSDN 排行榜</span>
    </div>
    <div class="header-menu">
      <a href="#">博客</a>
      <a href="#">下载</a>
      <a href="#">学院</a>
      <a href="#">社区</a>
      <a href="#">GitCode</a>
    </div>
  </div>

  <!-- Main Content -->
  <div class="main-container">
    <!-- Sidebar -->
    <div class="sidebar">
      <div 
        v-for="(item, index) in sidebarItems" 
        :key="index" 
        :class="['sidebar-item', { active: activeSidebar === index }]"
        @click="setActiveSidebar(index)">
        <i class="icon">{{ item.icon }}</i>
        <span>{{ item.name }}</span>
      </div>
    </div>

    <!-- Content -->
    <div class="content">
      <div class="ranking-header">全站综合热榜</div>
      <ul class="ranking-list">
        <li 
          v-for="(item, index) in rankingItems" 
          :key="index" 
          class="ranking-item">
          <div class="ranking-number">{{ index + 1 }}</div>
          <div class="ranking-content">
            <h4>{{ item.title }}</h4>
            <p>{{ item.details }}</p>
          </div>
          <div class="ranking-action">
            <button class="follow-button">关注</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeSidebar: 0,
    sidebarItems: [
      { name: '全站综合热榜', icon: '🔥' },
      { name: '领域内容榜', icon: '📊' },
      { name: '热门专栏榜', icon: '📚' },
      { name: '新晋作者榜', icon: '✍️' },
      { name: '问答酬金榜', icon: '💰' },
    ],
    rankingItems: [
      { title: '[AIGC] ChatGPT 提示词解析：如何生成高效标题、节日热点...', details: '4479 浏览 · 160 评论 · 205 收藏' },
      { title: 'AI 驱动 TDSQL-C Serverless 数据库技术实战', details: '1338 浏览 · 30 评论 · 40 收藏' },
      { title: 'Linux 信号 | 学习信号三步走 | 全解析信号的产生方式', details: '1283 浏览 · 96 评论 · 84 收藏' },
      { title: '【机器学习】探索 LSTM：深度学习领域的强大时间序列处理', details: '1429 浏览 · 141 评论 · 56 收藏' },
      { title: 'Redis 篇—深入了解 Redis 的架构设计及其流式数据', details: '876 浏览 · 54 评论 · 80 收藏' },
      { title: '[Linux] 项目自动化构建工具 make/Makefile 详解', details: '1544 浏览 · 90 评论 · 81 收藏' },
    ]
  },
  methods: {
    setActiveSidebar(index) {
      this.activeSidebar = index;
    }
  }
});
</script>
</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！

本人承接网网站开发，如有需要，欢迎私信咨询！

如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~

给新手学习前端开发的建议：

了解基础知识：
- 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
- 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。
实践项目：
- 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
- 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
- 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。
学习工具和框架：
- 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
- 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。
关注前端趋势：
- 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
- 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。
培养解决问题的能力：
- 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
- 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。
不断学习和提升：
- 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。
注重代码质量和可维护性：
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性，尽量编写可复用和可扩展的代码。
参与社区和交流：
- 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。