<!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. phalcon bug： model的findFirst会自动忽略一些空格

    version: Phalcon 3 如果DB存在一条记录phone='13012345678 '(后边有一个空格), 则在查询User::findFirst("phone = '13012 ...

  2. [转]springboot2 webflux 响应式编程学习路径

    原文链接 spring官方文档 springboot2 已经发布,其中最亮眼的非webflux响应式编程莫属了!响应式的weblfux可以支持高吞吐量,意味着使用相同的资源可以处理更加多的请求,毫无疑 ...

  3. 一个自定义python分布式专用爬虫框架。支持断点爬取和确保消息100%不丢失，哪怕是在爬取进行中随意关停和随意对电脑断电。

    0.此框架只能用于爬虫,由框架来调度url请求,必须按照此方式开发,没有做到类似celery的通用分布式功能,也不方便测试.可以使用另外一个,基于函数式编程的,调度一切函数的分布式框架,做到了兼容任何 ...

  4. 【App】Android Studio 海马玩

    一.工程创建及配置 1.gradle环境变量 2.首次创建工程慢:https://www.cnblogs.com/xiadewang/p/7820377.html 二.海马玩虚拟机 C:\Users\ ...

  5. 135、JS和Android交互范例

    很简单的直接上代码 <uses-permission android:name="android.permission.INTERNET" /> assets/web. ...

  6. SDE表空间不足解决办法（ORA-01653）

    一.问题描述       在往空间数据库拷贝数据的时候,发生了ORA-01653的错误,提示信息如下: 这主要是因为表空间不足引起的,出现这种表空间不足的问题一般有两种情况:一种是表空间的自动扩展功能 ...

  7. 没钱买windows怎么办？

    ReactOS是一个与 Windows 环境二进制兼容的操作系统. 同时,他是一款开源.免费的操作系统.

  8. [原]Jenkins(二十) jenkins再出发之Error: Opening Robot Framework log failed

    错误缘由:使用plugin [public robot framework test results] 生成的HTML文件都无法正常打开.   解决方案: Connect on your jenkin ...

  9. nginx的日志配置

    本文转自:https://www.cnblogs.com/biglittleant/p/8979856.html 版权归属原作者!!!!!! nginx access日志配置 access_log日志 ...

  10. Grunt jshint Warning: Path must be a string . Received null Use

    用grunt监视文件,出现'Warning: Path must be a string . Received null Use --force to continue 原因是没有设置reporter ...