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

Vue.js实战：使用Render函数构建留言列表

最新推荐文章于 2024-09-11 15:30:57 发布

原创

最新推荐文章于 2024-09-11 15:30:57 发布 · 524 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue实战留言列表 #Render函数 #Render留言列表

本文是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>