基于vue练习demo:发表评论案例 (使用localStorage存储数据)

前言
最近在学习 VUE的相关知识,之前学习html和css3和原生js及jq库时感觉还挺轻松,但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router,vue-cli,webpack,npm等等都得接触到一些),太庞杂了,因此因为这一个月以来看的东西太多了脑壳有点儿懵,想了想先巩固一下VUE的基础再往后面进行,所以练习写了这个 发表评论功能 的小玩意儿。
(emmmmmmmm…以上废话可忽略)

实现功能
一个提交评论的表单区域(包括:评论人及评论内容,组件呈现)
评论列表显示的区域(vue实例展现)
使用localStorage存储数据使得刷新或关闭浏览器不影响评论数量
效果展示
代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
  <title>Title</title>
</head>

<body>
  <!-- 评论列表展示区域 -->
  <div id="app-listcomments">
    <publish @func="getlocalinfo"></publish>
    <br>
    <div class="container">
      <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
          {{ item.content }}
          <span class="badge badge-secondary badge-pill">{{ item.user }}</span>
        </li>
      </ul>
    </div>
  </div>

  <!-- 提交评论的表单组件 -->
  <template id="publish">
    <div>
      <div class="card border-info">
        <div class="card-header">评论系统</div>
        <div class="card-body">
          <div class="container">
            <form>
              <div class="form-group">
                <label for="user">
                  评论人:
                </label>
                <input type="text" class="form-control" id="user" v-model="user">
              </div>
              <div class="form-group">
                <label for="content">
                  评论内容:
                </label>
                <textarea id="content" class="form-control" v-model="content"></textarea>
              </div>
              <input type="button" value="发表评论" class="btn btn-primary" @click="getinfo">
            </form>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
    //组件创建(使用局部组件方式)
    var publish = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: "#publish",
      methods: {
        getinfo() {//获得输入框的user及content数据并更新到评论列表
          if (this.user == '' || this.content == '') { //判断输入框是否为空
            alert("输入框请不要留空白")
          } else {
            var info = {
              id: Math.random(),
              user: this.user,
              content: this.content
            }  //获取用户输入的数据存到info对象中
            var list = JSON.parse(localStorage.getItem('cmts') || '[]') //获取localstrage中的数据,字符串类型需要转换为json对象
            list.push(info)//将得到的info对象的添加到list
            localStorage.setItem('cmts', JSON.stringify(list))//将更新好的数据重新添加到localstrage
            this.user = this.content = '' //清空输入框

            this.$emit('func')//更新页面的评论列表
          }
        }
      },
    }
    //vue实例部分创建
    var listcomment = new Vue({
      el: "#app-listcomments",
      data: {
        list: [{
            id: Math.random(),
            user: "林宥嘉",
            content: "多久了我都没变,爱你这回事整整六年"
          },
          {
            id: Math.random(),
            user: "华晨宇",
            content: "看着飞舞的尘埃掉下来"
          }
        ]
      },
      created() {
        var localinfo = JSON.parse(localStorage.getItem('cmts') || '[]')
        if (localinfo.length == 0) {
          var list = this.list
          localStorage.setItem('cmts', JSON.stringify(list))
        }
        this.getlocalinfo()
      },
      components: {
        'publish': publish
      },
      methods: {
        getlocalinfo() {
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      }
    })
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>

</html>

 

原文地址: https://blog.csdn.net/weixin_43388844/article/details/86443883

展开阅读全文

没有更多推荐了,返回首页