Vue系列之 => 评论功能(小知识点串联)

  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     <script src="../lib/jquery2.1.4.min.js"></script>
 10     <script src="../lib/Vue2.5.17.js"></script>
 11     <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css">
 12 </head>
 13 
 14 <body>
 15 
 16     <div id="app">
 17         <comment @func="loadComments"></comment>
 18         <ul class="list-group">
 19             <li class="list-group-item" v-for="(item,index) in list" :key="index">
 20                 <span class="badge">评论人:{{ item.user }}</span>
 21                 {{ item.content }}
 22             </li>
 23         </ul>
 24 
 25     </div>
 26 
 27     <!-- 模板 -->
 28     <template id="tmpl">
 29         <div>
 30             <div class="form-group form-inline">
 31                 <label for="">评论人：</label>
 32                 <input type="text" v-model="user" class="form-control">
 33             </div>
 34 
 35             <div class="form-group form-inline">
 36                 <label for="">评论内容：</label>
 37                 <textarea v-model="content" name="" id="" cols="30" rows="10" class="form-control"></textarea>
 38             </div>
 39 
 40             <div class="form-group form-inline">
 41                 <input type="button" class="btn btn-primary" @click="postComment" value="发表评论">
 42             </div>
 43         </div>
 44     </template>
 45 
 46     <script>
 47         var commentBox = {
 48             data(){
 49                 return {
 50                     user : '',
 51                     content : ''
 52                 }
 53             },
 54             template: '#tmpl',
 55             methods: {
 56                 postComment(){ //发表评论的方法
 57                     //  分析 发表评论的业务逻辑
 58                     // 1，评论数据放到 localStorage 中
 59                     // 2, 先组装一个最新的评论数据对象
 60                     // 3, 想办法把第二步中得到的评论对象保存到localStorage中
 61                     // 3.1 localStorage中只支持存放字符串，要先调用 JSON.stringify
 62                     // 3.2 在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string）转换为一个数组对象。
 63                     //然后把最新的评论 push 到这个数组。(解决如果键相同值会覆盖的问题)
 64                     // 3.3 如果获取 localStorage中的评论字符串为空不存在，则可以返回一个 '[]' ,让JSON.parse转换
 65                     // 3.4 把最新的评论数组再次调用 JSON.stringify 转为数组字符串，然后调用localStorage.setItem()
 66                     var comment = { id : Date.now() , user : this.user , content : this.content };
 67                     //从localStorage中获取所有评论
 68                     var list = JSON.parse(localStorage.getItem('cmts') || '[]');
 69                     // list.push(comment);
 70                     list.unshift(comment);
 71                     //重新保存最新的评论数据
 72                     localStorage.setItem('cmts',JSON.stringify(list));
 73                     this.$emit('func');
 74                     this.user = this.content = '';
 75                 }
 76             },
 77         }
 78 
 79         var vm = new Vue({
 80             el: '#app',
 81             data: {
 82                 list: [{
 83                         id: Date.now(),
 84                         user: '李白',
 85                         content: '天生我才必有用'
 86                     },
 87                     {
 88                         id: Date.now(),
 89                         user: '江小白',
 90                         content: '劝君更尽一杯酒'
 91                     },
 92                     {
 93                         id: Date.now(),
 94                         user: '小马',
 95                         content: '我姓马，马云的马'
 96                     },
 97                 ]
 98             },
 99             created() { //在创建的时候就调用加载函数。
100                 this.loadComments();
101             },
102             methods: {
103                 loadComments(){ //从本地的localStorage中加载列表
104                     var list = JSON.parse(localStorage.getItem('cmts') || '[]');
105                     this.list = list;
106                 }
107             },
108             components: {
109                 comment: commentBox
110             }
111         })
112     </script>
113 </body>
114 
115 </html>
Vue系列之 => 评论功能(小知识点串联)

猜你喜欢
