<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="../lib/jquery2.1.4.min.js"></script>

     <script src="../lib/Vue2.5.17.js"></script>

     <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css">

 </head>

 <body>

     <div id="app">

         <comment @func="loadComments"></comment>

         <ul class="list-group">

             <li class="list-group-item" v-for="(item,index) in list" :key="index">

                 <span class="badge">评论人:{{ item.user }}</span>

                 {{ item.content }}

             </li>

         </ul>

     </div>

     <!-- 模板 -->

     <template id="tmpl">

         <div>

             <div class="form-group form-inline">

                 <label for="">评论人：</label>

                 <input type="text" v-model="user" class="form-control">

             </div>

             <div class="form-group form-inline">

                 <label for="">评论内容：</label>

                 <textarea v-model="content" name="" id="" cols="30" rows="10" class="form-control"></textarea>

             </div>

             <div class="form-group form-inline">

                 <input type="button" class="btn btn-primary" @click="postComment" value="发表评论">

             </div>

         </div>

     </template>

     <script>

         var commentBox = {

             data(){

                 return {

                     user : '',

                     content : ''

                 }

             },

             template: '#tmpl',

             methods: {

                 postComment(){ //发表评论的方法

                     //  分析 发表评论的业务逻辑

                     // 1，评论数据放到 localStorage 中

                     // 2, 先组装一个最新的评论数据对象

                     // 3, 想办法把第二步中得到的评论对象保存到localStorage中

                     // 3.1 localStorage中只支持存放字符串，要先调用 JSON.stringify

                     // 3.2 在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string）转换为一个数组对象。

                     //然后把最新的评论 push 到这个数组。(解决如果键相同值会覆盖的问题)

                     // 3.3 如果获取 localStorage中的评论字符串为空不存在，则可以返回一个 '[]' ,让JSON.parse转换

                     // 3.4 把最新的评论数组再次调用 JSON.stringify 转为数组字符串，然后调用localStorage.setItem()

                     var comment = { id : Date.now() , user : this.user , content : this.content };

                     //从localStorage中获取所有评论

                     var list = JSON.parse(localStorage.getItem('cmts') || '[]');

                     // list.push(comment);

                     list.unshift(comment);

                     //重新保存最新的评论数据

                     localStorage.setItem('cmts',JSON.stringify(list));

                     this.$emit('func');

                     this.user = this.content = '';

                 }

             },

         }

         var vm = new Vue({

             el: '#app',

             data: {

                 list: [{

                         id: Date.now(),

                         user: '李白',

                         content: '天生我才必有用'

                     },

                     {

                         id: Date.now(),

                         user: '江小白',

                         content: '劝君更尽一杯酒'

                     },

                     {

                         id: Date.now(),

                         user: '小马',

                         content: '我姓马，马云的马'

                     },

                 ]

             },

             created() { //在创建的时候就调用加载函数。

                 this.loadComments();

             },

             methods: {

                 loadComments(){ //从本地的localStorage中加载列表

                     var list = JSON.parse(localStorage.getItem('cmts') || '[]');

                     this.list = list;

                 }

             },

             components: {

                 comment: commentBox

             }

         })

     </script>

 </body>

 </html>

Vue系列之 => 评论功能(小知识点串联)的更多相关文章

  1. 第 14 篇：交流的桥梁“评论功能”——HelloDjango 系列教程

    截止到目前为止我们的 django blog 文章展示部分,已经实现的"八九不离十"了.你以为本系列文章就要结束了吗?不能够!新的征程才刚刚开始,HelloDjango 系列文章刚 ...

  2. React.js 小书 Lesson16 - 实战分析：评论功能（三）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson16 转载请注明出处,保留原文链接和作者信息. 接下来的代码比较顺理成章了.修改 Commen ...

  3. React.js 小书 Lesson14 - 实战分析：评论功能（一）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson14 转载请注明出处,保留原文链接和作者信息. 课程到这里大家已经掌握了 React.js 的 ...

  4. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. React.js 小书 Lesson25 - 实战分析：评论功能（四）

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...

  6. Vue 变异方法splice删除评论功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 一周一个小demo — vue.js实现备忘录功能

    这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~  demo原git ...

  8. 全栈项目|小书架|服务器端-NodeJS+Koa2 实现评论功能

    评论功能分析 上图可以看出评论功能主要实现了:评论的发布.评论列表的展示. 在不考虑子评论以及图片评论的场景下,评论功能主要有以下两个接口: 发布评论 获取评论列表(考虑分页) 评论 Model 的建 ...

  9. 手写 Vue 系列 之 从 Vue1 升级到 Vue2

    前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...

随机推荐

  1. C#作为客户端调用gsoap生成的C++服务端

    近日在学习C++,偶然遇到网友想用C#调用gsoap生成的C++服务的问题,遂决定研究一下,网上搜索了很久,大多数是C++调用C#的应用.... 经过本人的不断努力,终于找到一种解决问题的方法,总结如 ...

  2. Centos7.0下Nexus私服搭建

    1.下载nexus wget https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.11.2-03-bundle.tar. ...

  3. idea中git颜色不显示或者文件右键没有git按钮解决方法

    VCS--->Enable Version Control Integration,然后选择git就可以了

  4. css如何实现一个元素高度固定宽度按比例显示？

    用padding-top百分比可以实现宽度固定高度按比例展示,现在的需求是对一个video视频的盒子div高度是固定的,宽度如何按比例展示? 解决后效果如图: 红框标注的即是我在上面高度比例固定的范围 ...

  5. MySQL 全文检索 ngram插件

    InnoDB全文索引:N-gram Parser[转] MySql5.7 建立全文索引 InnoDB默认的全文索引parser非常合适于Latin,因为Latin是通过空格来分词的.但对于像中文,日文 ...

  6. Oracle密码过期问题 ORA-28001:the password has expired

    如果已经过期了,首先需要修改密码,然后设置密码为无限期.修改以sys用户登陆. 修改密码:alter user username identified by password  密码可以和之前的密码相 ...

  7. 【Static Program Analysis - Chapter 3】Type Analysis

    类型分析,个人理解就是(通过静态分析技术)分析出代码中,哪些地方只能是某种或某几种数据类型,这是一种约束.   例如,给定一个程序: 其中,我们可以很直接地得到一些约束: 最后,经过简化可以得到: 对 ...

  8. 扁平数组构建DOM树

    interface IOrganizationNode { id: string; code: string; name: string; localName: string; localNameLo ...

  9. 给新手学习Java的建议

    有很多的朋友都在问我一个同样的问题:新手应该如何能学好Java.我做了一个简单的总结,分享给大家: 1-信念:无论你是选择JAVA,C,C#,C++....还是其他的语言编程,信念是第一位,只有相信自 ...

  10. poj 1556

    哦天哪这个萨比提又浪费了我好几个小时. 我们在check的时候只考虑严格相交就行了,想了很久才注意到这一点. 然后就建图跑最短路,over. #include <cstdio> #incl ...