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

左手的ㄟ右手 2022-02-01 13:25 227阅读 0赞

前言  
最近在学习 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][https_blog.csdn.net_weixin_43388844_article_details_86443883]

[https_blog.csdn.net_weixin_43388844_article_details_86443883]: https://blog.csdn.net/weixin_43388844/article/details/86443883