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>