基于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/[email protected]/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>

上例整体思路

1.利用bootstrap4创建出基本的页面内容（包括发表评论区域(vue组件)及下方的评论列表(vue实例)）
2.创建vue实例
3.vue实例中先设置data区中的list数组对象存储初始化的评论数据
4.再添加局部组件publish
5.vue实例中再使用生命周期钩子函数created来将初始化的list数据存储到localstrage里
6.vue实例中然后在方法methods中写一个函数getlocalinfo()来获取localstrage中的数据并显示到列表中
7.组件中使用v-model双向绑定数据得到需要添加的user及content
8.组件的方法methods中实现将获取到的user及content数据取出放到localstrage中并同步更新页面上的评论列表

ps：加油，进步！