第六章组件 65-66 组件案例-发表评论功能的实现

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4   <head>
  5     <meta charset="utf-8">
  6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
  8     <title>Document</title>
  9     <!--1.导入Vue的包-->
 10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
 11     <link rel="stylesheet" href="../lib/bootstrap.css">
 12   </head>
 13 
 14   <body>
 15       <div id="app">
 16     <cmt-box @func="loadComments"></cmt-box>
 17 
 18       <ul class="list-group">
 19         <li class="list-group-item" v-for="item in list" :key="item.id">
 20           <span class="badge">评论人：{{item.user}}</span>
 21           {{item.content}}
 22         </li>
 23       </ul> 
 24 
 25       </div>
 26 
 27     <template id="tmp1">
 28       <div>
 29         <div class="form-group">
 30           <label>评论人：</label>
 31           <input type="text" class="form-control" v-model="user">
 32         </div>
 33 
 34         <div class="form-group">
 35           <label>评论内容：</label>
 36           <textarea class="form-control" v-model="content"></textarea>
 37         </div>
 38 
 39         <div class="form-group">
 40           <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
 41         </div>
 42 
 43 
 44       </div>
 45     </template>
 46 
 47       <script>
 48 
 49       var commentBox={
 50         data(){
 51           return{
 52             user:'',
 53             content:''
 54           }
 55         },
 56         template:'#tmp1',
 57         methods:{
 58           postComment(){//发表评论的方法
 59             //分析：发表评论的业务逻辑
 60             //1.评论数据存到哪里去？？？存放到了localStorage中 评论数据存到哪里去？？？存放到了localStorage中.setItem('cmts','')
 61             //2.先组织出一个最新的评论数据对象
 62             //3.想办法，把第二步中，得到的评论对象，保存到localStorage中；
 63             //3.1 localStorage只支持存放字符串数据，要先调用JSON.stringify
 64             //3.2 在保存 最新的评论数据之前，要先从localStorage获取到之前的评论数据（string），转换为一个数组对象，然后，把最新的评论，push到这个数组
 65             //3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在，则可以返回一个'[]' 让JSON.parse去转换
 66             //3.4 把 最新的 评论列表数组，再次调用JSON.tringify转为 数组字符串，然后调用 localStorage.setItem()
 67             var comment = {id:Date.now(),user:this.user,content:this.content}
 68             //从localStorage中获取所有的评论
 69             var list =JSON.parse(localStorage.getItem('cmts')||'[]')
 70             list.unshift(comment)
 71             //重新保存最新的评论数据
 72             localStorage.setItem('cmts',JSON.stringify(list))
 73             this.user=this.content=''
 74             this.$emit('func')
 75 
 76           }
 77         }
 78       }
 79           //创建 Vue 实例，得到 ViewModel
 80           var vm =  new Vue({
 81               el:'#app',
 82         data:{
 83          list:[
 84          {id:Date.now(), user:'李白',content:'天生我材必有用' },
 85          {id:Date.now(), user:'江小白',content:'劝君更尽一杯酒' },
 86          {id:Date.now(), user:'李白',content:'我姓马，风吹草低见牛羊的马' }
 87          ]
 88         },
 89         beforeCreate(){//注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data和methods都还没有被初始化好
 90 
 91         },
 92         created(){
 93           this.loadComments()
 94         },
 95         methods:{
 96           loadComments(){//从本地的localStorage 中，加载评论列表
 97           var list =JSON.parse(localStorage.getItem('cmts')||'[]')
 98           this.list=list
 99           }
100         },
101         components:{
102           'cmt-box':commentBox
103         }
104           });
105       </script>
106   </body>
107 </html>
第六章 组件 65-66 组件案例-发表评论功能的实现

第六章组件 65-66 组件案例-发表评论功能的实现
