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

我不是女神ヾ 2021-11-04 11:44 233阅读 0赞

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     
     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>

转载于:https://www.cnblogs.com/songsongblue/p/11003628.html