Vue.js 入门：从零开始构建你的第一个应用」「前端开发快速上手：HTML、CSS、JavaScript 基础教程」「React 与 Vue 深度对比：如何选择适合你的框架？」「Node

最新推荐文章于 2026-06-29 10:21:29 发布

原创最新推荐文章于 2026-06-29 10:21:29 发布 · 627 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

效果图

在这里插入图片描述

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>程序员博客</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .blog-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .blog-item {
      flex: 1 1 calc(33.333% - 20px);
      box-sizing: border-box;
      border: 1px solid #ddd;
      padding: 10px;
      background-color: #f9f9f9;
      cursor: pointer;
    }
    .blog-item img {
      width: 100%;
      height: auto;
    }
    .blog-detail {
      margin-top: 20px;
    }
    .comments {
      margin-top: 20px;
    }
    .comment {
      border-bottom: 1px solid #ddd;
      padding: 10px 0;
    }
    .comment-form {
      margin-top: 20px;
    }
    .comment-form textarea {
      width: 100%;
      height: 100px;
      padding: 10px;
      box-sizing: border-box;
    }
    .comment-form button {
      margin-top: 10px;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    .comment-form button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <h1>程序员博客</h1>
    <div class="blog-list">
      <div v-for="blog in blogs" :key="blog.id" class="blog-item" @click="viewBlog(blog.id)">
        <img :src="blog.image" :alt="blog.title">
        <h2>{{ blog.title }}</h2>
        <p>{{ blog.summary }}</p>
      </div>
    </div>
    <div v-if="selectedBlog" class="blog-detail">
      <h2>{{ selectedBlog.title }}</h2>
      <img :src="selectedBlog.image" :alt="selectedBlog.title">
      <p>{{ selectedBlog.content }}</p>
      <div class="comments">
        <h3>评论</h3>
        <div v-for="comment in selectedBlog.comments" :key="comment.id" class="comment">
          <strong>{{ comment.author }}</strong>: {{ comment.text }}
        </div>
        <div class="comment-form">
          <textarea v-model="newComment" placeholder="写下你的评论..."></textarea>
          <button @click="addComment">提交评论</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app', // 确保挂载到正确的 DOM 元素
      data() {
        return {
          blogs: [
            {
              id: 1,
              title: 'Vue.js 入门指南',
              summary: '学习 Vue.js 的基础知识，快速上手前端开发。',
              image: 'https://via.placeholder.com/200x150?text=Vue.js',
              content: 'Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它易于上手，且功能强大。',
              comments: [
                { id: 1, author: 'Alice', text: '非常好的入门教程！' },
                { id: 2, author: 'Bob', text: '感谢分享，学到了很多。' }
              ]
            },
            {
              id: 2,
              title: 'React vs Vue',
              summary: '比较 React 和 Vue 的优缺点，帮助你选择合适的前端框架。',
              image: 'https://via.placeholder.com/200x150?text=React+vs+Vue',
              content: 'React 和 Vue 都是非常流行的前端框架，各有优缺点。本文将详细比较它们。',
              comments: [
                { id: 3, author: 'Charlie', text: '很详细的对比，谢谢！' }
              ]
            },
            {
              id: 3,
              title: 'Node.js 实战',
              summary: '通过实战项目学习 Node.js，掌握后端开发技能。',
              image: 'https://via.placeholder.com/200x150?text=Node.js',
              content: 'Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，非常适合构建高性能的网络应用。',
              comments: []
            }
          ],
          selectedBlog: null,
          newComment: ''
        };
      },
      methods: {
        viewBlog(blogId) {
          this.selectedBlog = this.blogs.find(blog => blog.id === blogId);
        },
        addComment() {
          if (this.newComment.trim()) {
            this.selectedBlog.comments.push({
              id: this.selectedBlog.comments.length + 1,
              author: '匿名',
              text: this.newComment
            });
            this.newComment = '';
          }
        }
      }
    });
  </script>
</body>
</html>