Vue.js入门 0xF Render函数（5）实战：留言列表

最新推荐文章于 2025-07-24 13:48:50 发布

cellinlab

最新推荐文章于 2025-07-24 13:48:50 发布

阅读量517

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue JavaScript 前端基础文章标签： Vue Vue实战留言列表 Render函数 Render留言列表

本文链接：https://blog.youkuaiyun.com/funkstill/article/details/86917334

本文是Vue.js入门系列的第五篇，主要介绍如何利用Render函数实现一个留言列表的功能。通过分析index.html、index.js、input.js、list.js和style.css等文件的内容，我们将了解到如何创建和展示留言，以及如何处理用户输入。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>留言列表</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="app" v-cloak style="width:500px;margin:0 auto;">
            <div class="message">
                <!--使用v-model实现username和message双向绑定-->
                <v-input v-model="username"></v-input>
                <v-textarea v-model="message" ref="message"></v-textarea>
                <button @click="handleSend">发布</button>
            </div>
            <list :list="list" @reply="handleReply"></list>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="input.js"></script>
        <script src="list.js"></script>
        <script src="index.js"></script>
    </body>
</html>