1. 项目概述

  • 动态加载评论数据
  • 展示评论列表
  • 允许用户发表新评论
  • 展示评论的回复功能

通过这个项目，我们将学习到Vue的基本数据绑定、事件处理以及组件化开发等知识。

2. 准备工作

在开始这个项目之前，请确保您已经具备以下基础知识：

  • HTML、CSS 和 JavaScript
  • 对Vue.js有基本的了解

您可以通过以下步骤来准备开发环境：

  1. 在HTML页面中引入Vue.js库。
  2. 创建Vue应用程序实例。
  3. 准备用于展示评论的HTML元素。

以下是引入Vue.js库的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Comment System</title>
</head>
<body>
    <div id="app">
        <!-- 评论列表组件 -->
        <comment-list :comments="comments"></comment-list>
        <!-- 发表评论表单 -->
        <comment-form @submit="addComment"></comment-form>
    </div>

    <!-- 引入Vue.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

3. 创建Vue应用程序实例

在app.js文件中，我们首先需要创建Vue应用程序实例，并设置初始数据。

new Vue({
    el: '#app',
    data: {
        comments: []
    },
    methods: {
        addComment(comment) {
            this.comments.push(comment);
        }
    }
});

4. 创建评论列表组件

Vue.component('comment-list', {
    props: ['comments'],
    template: `
        <div>
            <div v-for="(comment, index) in comments" :key="index">
                <p>{{ comment.name }}: {{ comment.content }}</p>
                <comment-reply-list :replies="comment.replies"></comment-reply-list>
            </div>
        </div>
    `
});

5. 创建发表评论表单

Vue.component('comment-form', {
    data() {
        return {
            name: '',
            content: ''
        };
    },
    template: `
        <div>
            <input v-model="name" placeholder="Name">
            <textarea v-model="content" placeholder="Comment"></textarea>
            <button @click="submit">Submit</button>
        </div>
    `,
    methods: {
        submit() {
            if (this.name.trim() && this.content.trim()) {
                this.$emit('submit', { name: this.name, content: this.content, replies: [] });
                this.name = '';
                this.content = '';
            }
        }
    }
});

6. 创建评论回复列表组件

Vue.component('comment-reply-list', {
    props: ['replies'],
    template: `
        <div>
            <div v-for="(reply, index) in replies" :key="index">
                <p>{{ reply.name }}: {{ reply.content }}</p>
            </div>
            <comment-reply-form :comment-id="commentId"></comment-reply-form>
        </div>
    `
});

7. 创建评论回复表单

Vue.component('comment-reply-form', {
    props: ['commentId'],
    data() {
        return {
            name: '',
            content: ''
        };
    },
    template: `
        <div>
            <input v-model="name" placeholder="Name">
            <textarea v-model="content" placeholder="Reply"></textarea>
            <button @click="submitReply">Submit</button>
        </div>
    `,
    methods: {
        submitReply() {
            if (this.name.trim() && this.content.trim()) {
                this.$emit('submit-reply', { name: this.name, content: this.content });
                this.name = '';
                this.content = '';
            }
        }
    }
});

8. 总结