Vue教程(组件案例-评论列表)

  前面给大家介绍了Vue的组件功能,本文我们通过一个评论列表的案例来巩固下组件的内容,具体效果如下:

在这里插入图片描述

Vue组件案例

1.基本页面

  我们先来整理下基础的页面如下:

<!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">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                
            }
        })
    </script>
</body>
</html>


2.列表效果

  在基础页面的基础上我们来添加 底部的 评论列表,用bootstrap来实现。如下

<!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">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
    <div id="app">
        <ul class="list-group">
            <!--循环取出列表数据-->
            <li class="list-group-item" v-for="(item ,i) in list" :key="item.id">
                <span class="badge">{{item.name}}</span>
                {{item.content}}
            </li>
        </ul>
    </div>

 
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                        {id: Date.now(),name:"波波烤鸭1",content:"非常棒..."},
                        {id: Date.now(),name:"波波烤鸭2",content:"非常棒..."},
                        {id: Date.now(),name:"波波烤鸭3",content:"非常棒..."}
                    ]
            },
            methods: {}  
        })
    </script>
</body>
</html>

在这里插入图片描述

3.添加评论组件

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

在这里插入图片描述

在这里插入图片描述

组件使用

在这里插入图片描述
效果

在这里插入图片描述

4.实现效果

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

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
效果

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

这样开始加载的就是 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">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
  <div id="app">


    <cmt-box @func="loadComments"></cmt-box>


    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人: {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>


  </div>


  <template id="tmpl">
    <div>

      <div class="form-group">
        <label>评论人:</label>
        <input type="text" class="form-control" v-model="user">
      </div>

      <div class="form-group">
        <label>评论内容:</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>

      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>

    </div>
  </template>

  <script>

    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 发表评论的方法
      
          var comment = { id: Date.now(), user: this.user, content: this.content }

          // 从 localStorage 中获取所有的评论
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 评论数据
          localStorage.setItem('cmts', JSON.stringify(list))

          this.user = this.content = ''

          this.$emit('func')
        }
      }
    }

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: 'zs1', content: 'aaa' },
          { id: Date.now(), user: 'zs2', content: 'bbbb' },
          { id: Date.now(), user: 'zs3', content: 'cccc' }
        ]
      },
      beforeCreate(){ // 注意:这里不能调用 loadComments 方法,因为在执行这个钩子函数的时候,data 和 methods 都还没有被初始化好

      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 从本地的 localStorage 中,加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>
发布了396 篇原创文章 · 获赞 1796 · 访问量 297万+
展开阅读全文

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

©️2019 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览