Vue入门到放弃23(vue案例--评论列表)

基础页面

    

        

            
            

                评论人：{{item.user}}{{item.content}}
            
        
    
    

效果：

 

添加评论组件

  现在我们通过Vue的组件来添加 评论的头部，

使用组件：

效果：

实现效果

         组件添加好后，我们通过点击 发表评论 来添加内容到 评论列表中。实现的逻辑是

1.通过点击 发表评论 触发点击事件 调用组件中methods中定义的方法
2.在methods中定义的方法中 加载保存中 localStorage中的列表数据到list中
3.将 录入的信息 添加到list中，然后将数据保存到 localStorage中
4.调用父组件中的方法来刷新列表数据
1  定义方法

 方法：

methods: {
        postComment() { // 发表评论的方法
          // 分析：发表评论的业务逻辑
          // 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          // 2. 先组织出一个最新的评论数据对象
          // 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
          //  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify 
          //  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
          //  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
          //  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()

          var comment = { id: Date.now(), user: this.user, content: this.content }

          // 从 localStorage 中获取所有的评论

          // JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串
          // JSON.parse()可以将JSON字符串转为一个对象

          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 评论数据
          localStorage.setItem('cmts', JSON.stringify(list))
          this.user = this.content = ''
          // this.loadComments() // ?????
          this.$emit('func')
        }
      }

第一次刷新的时候显示的还是 固定的数据，这时我们可以 在Vue实例的生命周期的方法的 created 中再显示的调用一次 加载数据的方法

效果：

 代码：

  

    
    

      

        评论人： {{ item.user }}
        {{ item.content }}