Day3.18组件案例-发表评论功能

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <script src="../lib/js/vue.js"></script>
  7     <link rel="stylesheet" href="../lib/css/bootstrap.min.css">
  8 </head>
  9 <body>
 10 <div id="app">
 11 <!--    子组件拿到 父组件中的 loadComments方法-->
 12     <comment-box @func="loadComments"></comment-box>
 13     <ul class="list-group">
 14         <li class="list-group-item" v-for="item in list" :key="item.id">
 15             <span class="badge">评论人：{{ item.user }}</span>
 16             {{ item.content}}
 17         </li>
 18     </ul>
 19 </div>
 20 <template id="tem1">
 21     <div>
 22         <div class="form-group">
 23             <label>评论人：</label>
 24             <input type="text" class="form-control" v-model="user">
 25         </div>
 26         <div class="form-group">
 27             <label>评论内容：</label>
 28             <textarea class="form-control" v-model="content"></textarea>
 29         </div>
 30         <div class="form-group">
 31             <label>评论内容：</label>
 32             <input type="button" value="发表评论" class="btn-primary" @click="submit">
 33         </div>
 34     </div>
 35 </template>
 36 <script>
 37 
 38     const commentBox = {
 39         template:'#tem1',
 40         // 组件中的数据
 41         data(){
 42             return {
 43                 user:'',
 44                 content:''
 45             }
 46         },
 47         methods: {
 48             submit(){ // 发表评论的方法
 49                 /**
 50                  * 分析发表评论的业务逻辑
 51                  *    1.评论数据存到哪里去    - - - 存放到 localStorage 中
 52                  *      2.先组织出一个最新的评论数据对象
 53                  *        3.把第二步中得到的评论对象保存到 localStorage 中
 54                  *          3.1 localStorage 只支持存放字符串数据，要先调用 JSON.stringify
 55                  *          3.2 在保存最新的评论数据之前，要先从 localStorage 获取之前的评论数据（string）
 56                  *                 转换为一个 数组对象，然后，把最新的评论push到这个数组
 57                  *          3.3 如果获取到的 localStorage 中的评论字符串为空不存在，则可以返回一个“[]”，
 58                  *                 让c 去转换
 59                  *          3.4 把最新的评论列表数据，再次调用 JSON.stringify 转为 数组字符串，然后调用 localStorage.setItem()
 60                  */
 61                 var comment = { id:Date.now(),user:this.user,content:this.content }
 62                 // 从 localStorage 中获取所有的评论
 63                 var list = JSON.parse(localStorage.getItem('comments') || '[]');
 64 
 65                 list.unshift(comment);
 66                 // 重新保存最新的评论数据
 67                 localStorage.setItem('comments',JSON.stringify(list));
 68 
 69                 this.user = this.comment = '';
 70                 // 触发 func （调用 父组件中的 loadComments方法）
 71                 this.$emit('func')
 72 
 73 
 74             }
 75         }
 76     };
 77     const vm = new Vue({
 78         el:'#app',
 79         data:{
 80             list:[
 81                 {id:Date.now(),user:'李白',content:'天生我材必有用'},
 82                 {id:Date.now(),user:'杜甫',content:'天生我材必有用！'},
 83                 {id:Date.now(),user:'王维',content:'天生我材必有用！！'}
 84             ]
 85         },
 86         beforeCreate(){
 87         //    不能在这里调用 loadComments 方法，在执行这个钩子函数的时候，data 和 methods 还没有被初始化
 88         },
 89         created(){
 90             // 在这里调用 loadComments方法
 91             this.loadComments()
 92         },
 93         methods:{
 94             loadComments(){ // 定义一个loadComments方法，从本地的 localStorage 中，加载评论列表
 95                 var list = JSON.parse(localStorage.getItem('comments') || '[]');
 96                 this.list = list
 97             }
 98         },
 99         components:{
100             // 子组件
101             commentBox:commentBox
102         }
103     })
104 </script>
105 </body>
106 </html>
Day3.18组件案例-发表评论功能

猜你喜欢
