<!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. dubbo系列一：dubbo介绍、dubbo架构、dubbo的官网入门使用demo

    一.dubbo介绍 Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的RPC实现服务的输出和输入功能,可以和Spring框架无缝集成.简单地说,dubbo是一个基于Spri ...

  2. Linux 下MQ的安装和配置亲测

    开篇之前奉上几条黄金链接: MQ参考文档 http://publib.boulder.ibm.com/infocenter/wmqv7/v7r0m0/index.jsp?topic=%2Fcom.ib ...

  3. Android学习Scroller(五)——具体解释Scroller调用过程以及View的重绘

    PS: 该篇博客已经deprecated,不再维护.详情请參见  站在源代码的肩膀上全解Scroller工作机制  http://blog.csdn.net/lfdfhl/article/detail ...

  4. thinphp5框架遇到 mkdir() Permission denied 解决办法

    网站重装 直接复制本地程序文件 里面数据库链接信息要改成线上的 然后mysql apache 等都没有动 运行后出现错误 mkdir() Permission denied 这是由于runtime目录 ...

  5. 在cmd启动一个win32程序,printf把信息输出到启运它的那个CMD窗口

    #define ProcessBasicInformation 0 typedef struct { DWORD ExitStatus; DWORD PebBaseAddress; DWORD Aff ...

  6. zhenya moves from parents

    Zhenya moved from his parents' home to study in other city. He didn't take any cash with him, he onl ...

  7. 使用stylus

    1. 首先确保  node + npm  环境一切正常. 2. 全局安装  stylus: 在命令行中:            npm i stylus@latest -g 3. 此时可以创建  .s ...

  8. javascript数组的内置对象Array

    javascript的内置对象Array是用于构造数组的全局对象,数组是类似于列表的高阶对象. 创建数组的方法: 1通过字面量:var arr = [1,2,3]; 里面的参数直接作为数组里的值 2通 ...

  9. python--列表，元组，字符串互相转换

    列表,元组和字符串python中有三个内建函数:,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示 >>> s = "xxxxx& ...

  10. DWZ富客户端框架使用手册【申明：来源于网络】

    DWZ富客户端框架使用手册[申明:来源于网络] ---- 地址:http://www.docin.com/p-288065388.html&s=C1218A403B04136160905E8E ...