专栏首页Devops专栏43. Vue组件案例-评论列表

43. Vue组件案例-评论列表

需求

为了更好看看父子组件之间的传值,本章来一个评论列表的小案例。

编写这个案例步骤大致如下:

  • 编写一个基本的样式页面,页面内容有两部分:提交评论信息表单、展示评论信息的列表
  • 那么提交评论信息表单可以写为一个子组件,而评论信息列表为父组件
  • 提交评论信息表单将子组件的评论内容传递到父组件评论信息列表
  • 同时,需要写一个存储以及刷新评论信息列表的方法,在子组件提交评论信息之后,子组件还要调用父组件的这个刷新方法。
  • 评论信息的基本存储方式可以用localStorage

好了,看到上面几项的需求描述,下面来实现看看。

示例

1.编写基本页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>
    <!--  2.导入bootstrap库  -->
    <link rel="stylesheet" type="text/css" href="lib/bootstrap4/bootstrap.min.css">
    <script type="text/javascript" src="lib/bootstrap4/popper.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap4/bootstrap.min.js"></script>
</head>
<body>

    <div id="app">

        <div class="container">

            <!-- 添加评论 start -->
            <div class="row mt-2">
                <!-- 输入评论人 -->
                <div class="form-group row">
                    <label for="input_person" class="col-4 col-form-label">评论人</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="input_person" placeholder="评论人">
                    </div>
                </div>

                <!-- 输入评论内容 -->
                <div class="form-group row ml-3">
                    <label for="input_content" class="col-4 col-form-label">评论内容</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="input_content" placeholder="评论内容">
                    </div>
                </div>

                <!-- 提交评论按钮  -->
                <input type="button" value="提交" class="btn btn-primary ml-2 mb-3">

            </div>
            <!-- 添加评论 end -->

            <!-- table列表 start-->
            <div class="row">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">评论人</th>
                            <th scope="col">内容</th>
                            <th scope="col">时间</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">李白</th>
                        <td>床前明月光</td>
                        <td>2020-01-17 12:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <th scope="row">杜甫</th>
                        <td>疑是地上霜</td>
                        <td>2020-01-16 12:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    <tr>
                        <th scope="row">王维</th>
                        <td>黑云压城城欲摧</td>
                        <td>2020-01-17 10:21:31</td>
                        <td><a href="#">删除</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- table列表 end-->

        </div>

    </div>

    <script>
        // 2\. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods:{}
        })
    </script>

</body>
</html>

页面显示如下:

好了,现在基本页面已经写好了。但是为了演示父组件与子组件之间的传值以及调用关系,我将上面提交评论的部分抽出来作为一个子组件。

2.抽取评论内容作为子组件

上面抽取添加评论内容为一个组件之后,下面来在父组件中使用子组件,如下:

浏览器显示如下:

那么组件显示成功之后,下面就应该实现一下添加评论内容的功能。

3.实现添加评论内容的思路

本次添加评论内容首先需要考虑一个数据的存储,之前的一个示例是直接加入到父组件Vue实例的data中,这个比较简单。

那么本次则试下使用浏览器的localStorage来进行数据存储。

那么首先要复习一下localStorage的基本用法,如下:

//设置:
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//获取:
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");

好了,知道了基本用法,下面就要存储一下评论内容到localStorage中。

实现思路:

首先组件设置data参数:评论者user和评论内容comments,使用v-model绑定两个文本框的值,然后给添加按钮设置click方法,在方法中将usercomments存储到localStorage中。

4.使用v-mode设置评论者以及评论内容

5.设置提交按钮的click事件,打印评论数据

在浏览器查看一下打印出来的数据,如下:

已经可以获取到数据了,下面将其进行存储。

6.将获取的usercomment存储到localStorage

打开浏览器,查看存储的数据,如下:

7.存储评论内容数据完毕后,清空输入框

好了,这时候已经设置添加好评论内容的数据。下面来看看如何在列表中刷新数据。

8.在父组件编写刷新列表的方法reload_list(),提供子组件进行调用

在浏览器点击提交按钮,查看是否触发父组件的reload_list方法,如下:

好了,到这里可以执行父组件的刷新列表方法了,那么下面只要完善刷新列表的方法,对数据进行刷新即可。

9.设置reload_list()读取localStorage数组

10.使用v-for渲染从localStorage读取出来的数组数据

浏览器测试如下:

已经成功可以添加评论以及刷新列表数据了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django 2.1.7 模型 - MVT模型增删功能

    上一篇Django 2.1.7 模型类 - 字段类型讲述了关于模型字段类的内容,丰富了不少模型中的字段类型。

    Devops海洋的渔夫
  • 16. Vue 常用列表操作实例 - 增加列表数据

    在前端开发中,对于列表的操作是最常见的,例如:增加列表数据、删除列表数据、查询列表的关键字等等。

    Devops海洋的渔夫
  • Celery 4.3.0 使用supervisor 配置后台运行

    https://thomassileo.name/blog/2012/08/20/how-to-keep-celery-running-with-supervi...

    Devops海洋的渔夫
  • DOM操作(20171027)

    天天_哥
  • 前端基础-CSS滑动门效果

    概念:3个盒子浮动,左边和右边写宽高,负责加载两边的背景,中间的盒子宽度不定,让文字撑开

    cwl_java
  • html初学(三)

    This text containssubscript This text containssuperscript

    机器学习和大数据挖掘
  • 2018深度学习十大趋势:元学习成新SGD,多数硬件创企将失败

    原作 Carlos E. Perez 李杉 编译自 Intuition Machine博客 量子位 出品 | 公众号 QbitAI ? 2018年,一切可能都会...

    量子位
  • 谁是2017年的顶级开源项目?一探究竟

    本文介绍了在开源界比较有名的六个项目。如果你对其中的某个项目不了解的话,赶快来学习一下吧。 ? 今天,让我们一起来看一下2017年开源界的六个顶级玩家。下面列出...

    CSDN技术头条
  • 十分钟教会你用Python写网络爬虫程序

    在互联网时代,爬虫绝对是一项非常有用的技能。借助它,你可以快速获取大量的数据并自动分析,或者帮你完成大量重复、费时的工作,分分钟成为掌控互联网的大师。

    短短的路走走停停
  • DenseNAS:密集连接搜索空间下的高灵活度网络结构搜索

    最近,地平线-华中科技大学计算机视觉联合实验室提出了一个新颖的 Differentiable NAS 方法——DenseNAS, 该方法可以搜索网络结构中每个 ...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券