<!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. iOS 使用xib定义一个View，修改frame无效问题解决

    遇到过好多次使用自定义view,修改frame无效问题, 之前都是放弃xib,直接手写,发现手写简单的还行,复杂的UI就坑逼了.所以还是需要用到可视化编辑的xib. 整理一下,自己备忘也供iOS开发的 ...

  2. swoole Tcp服务器

    基础代码 <?php //创建Server对象,监听 127.0.0.1:9501端口 $serv = ); //监听连接进入事件 $serv->on('connect', functio ...

  3. java生成txt文件,读txt文件

    1.方法1 public static void main(String[] args) { try { FileWriter fileWriter = new FileWriter("c: ...

  4. 如何在 Fiddler Script 中 自定义 修改 Request 、 Response

    Fiddler是一个http协议调试代理工具,方便进行http请求的拦截处理.改写请求.返回值等. 在Rules菜单下:  此次更改请求 头 ,so go to OnBeforeRequest 或者 ...

  5. 关于Kafka broker IO的讨论

    Apache Kafka是大量使用磁盘和页缓存(page cache)的,特别是对page cache的应用被视为是Kafka实现高吞吐量的重要因素之一.实际场景中用户调整page cache的手段并 ...

  6. 新版的 Springsecurity request.getRequestDispatcher).forward(request, response); 404 问题,已解决

    旧版本的 可以直接 转发登陆 request.getRequestDispatcher).forward(request, response); 新版本的转发会404,原因 SpringSecurit ...

  7. python基础类型—集合

    一,集合. 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. ...

  8. electron打包后, 使用NSIS再打包成安装包 .exe文件

    NSIS下载地址

  9. JavaScript Promise：去而复返

    原文:http://www.html5rocks.com/en/tutorials/es6/promises/ 作者:Jake Archibald 翻译:Amio 女士们先生们,请准备好迎接 Web ...

  10. HashSet的底层

    今天看博客,发现有个哥哥写到 HashSet的底层是数组结构,有点懵逼,不是HashMap吗怎么成数组了? 遂去查了下源码: 得以下结论: HashSet底层是 HashMap,其元素是内部map的k ...