<!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. react项目和next项目修改默认端口号

    creat-react-app生成的项目默认端口号是3000,如下可以更改: 在package.json中修改 "start":"react-scripts start& ...

  2. deep learning 以及deep learning 常用模型和方法

    首先为什么会有Deep learning,我们得到一个结论就是Deep learning需要多层来获得更抽象的特征表达. 1.Deep learning与Neural Network 深度学习是机器学 ...

  3. Scala 按名称参数调用函数 与 =>的用法

    转自:http://blog.csdn.net/shenxiaoming77/article/details/54835679 通常情况下,函数的参数是传值参数:即参数的值在它被传递给函数之前被确定. ...

  4. cocos2dx2.x&3.x部分函数对照表

    | v2.1 names | v3.0 names | | ccp | Point | | ccpNeg | Point::- | | ccpAdd | Point::+ | | ccpSub | P ...

  5. Gym 101972

    F读错题wa了三个小时.自闭了,不然I题有可能能出的..已经想到组合数也敲完组合数板子了. A:这...**题吧,第一眼看的这个就秒了 #include<bits/stdc++.h> #d ...

  6. UCloud 机房的网络搭建（计蒜客初赛第五场）

    UCloud 刚刚建立一个新机房,近日正在进行网络搭建.机房内有 nn 台服务器和 mm 个分线器,整个机房只有一个网线出口.分线器的作用是将一根网线转换成多根网线.蒜头君也知道每个分线器输出的最大网 ...

  7. 20.react库 入门

    vue插件: 使用方式:Vue.use(插件名称); {}/function 1.对象 export default { install(Vue,options){ } } 2.函数 export d ...

  8. 关于histry的pushstate 和 popstate事件的应用

    这篇文章是基础:http://www.cnblogs.com/kaituorensheng/p/3776527.html: histry的单页面应用有两个写法:哈希值和?: 哈希值例子: 实现效果:点 ...

  9. 向comboboxEdit中动态添加数据库中保存的用户自定义单位制的名称

    if (radioGroup1.SelectedIndex == 2) { bool _Flag = true; sm.SetLciVisible(lciDelete, _Flag); sm.SetL ...

  10. 补充：javascript

    写法分类:1.行内(内联)写在标签里面,以属性的形式表现,属性名是事件属性名例如:<button onClick="js代码"></button>2.内嵌写 ...