1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.      <script src="../lib/jquery2.1.4.min.js"></script>
  10.      <script src="../lib/Vue2.5.17.js"></script>
  11.      <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css">
  12.  </head>
  13.  
  14.  <body>
  15.  
  16.      <div id="app">
  17.          <comment @func="loadComments"></comment>
  18.          <ul class="list-group">
  19.              <li class="list-group-item" v-for="(item,index) in list" :key="index">
  20.                  <span class="badge">评论人:{{ item.user }}</span>
  21.                  {{ item.content }}
  22.              </li>
  23.          </ul>
  24.  
  25.      </div>
  26.  
  27.      <!-- 模板 -->
  28.      <template id="tmpl">
  29.          <div>
  30.              <div class="form-group form-inline">
  31.                  <label for="">评论人：</label>
  32.                  <input type="text" v-model="user" class="form-control">
  33.              </div>
  34.  
  35.              <div class="form-group form-inline">
  36.                  <label for="">评论内容：</label>
  37.                  <textarea v-model="content" name="" id="" cols="30" rows="10" class="form-control"></textarea>
  38.              </div>
  39.  
  40.              <div class="form-group form-inline">
  41.                  <input type="button" class="btn btn-primary" @click="postComment" value="发表评论">
  42.              </div>
  43.          </div>
  44.      </template>
  45.  
  46.      <script>
  47.          var commentBox = {
  48.              data(){
  49.                  return {
  50.                      user : '',
  51.                      content : ''
  52.                  }
  53.              },
  54.              template: '#tmpl',
  55.              methods: {
  56.                  postComment(){ //发表评论的方法
  57.                      //  分析 发表评论的业务逻辑
  58.                      // 1，评论数据放到 localStorage 中
  59.                      // 2, 先组装一个最新的评论数据对象
  60.                      // 3, 想办法把第二步中得到的评论对象保存到localStorage中
  61.                      // 3.1 localStorage中只支持存放字符串，要先调用 JSON.stringify
  62.                      // 3.2 在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string）转换为一个数组对象。
  63.                      //然后把最新的评论 push 到这个数组。(解决如果键相同值会覆盖的问题)
  64.                      // 3.3 如果获取 localStorage中的评论字符串为空不存在，则可以返回一个 '[]' ,让JSON.parse转换
  65.                      // 3.4 把最新的评论数组再次调用 JSON.stringify 转为数组字符串，然后调用localStorage.setItem()
  66.                      var comment = { id : Date.now() , user : this.user , content : this.content };
  67.                      //从localStorage中获取所有评论
  68.                      var list = JSON.parse(localStorage.getItem('cmts') || '[]');
  69.                      // list.push(comment);
  70.                      list.unshift(comment);
  71.                      //重新保存最新的评论数据
  72.                      localStorage.setItem('cmts',JSON.stringify(list));
  73.                      this.$emit('func');
  74.                      this.user = this.content = '';
  75.                  }
  76.              },
  77.          }
  78.  
  79.          var vm = new Vue({
  80.              el: '#app',
  81.              data: {
  82.                  list: [{
  83.                          id: Date.now(),
  84.                          user: '李白',
  85.                          content: '天生我才必有用'
  86.                      },
  87.                      {
  88.                          id: Date.now(),
  89.                          user: '江小白',
  90.                          content: '劝君更尽一杯酒'
  91.                      },
  92.                      {
  93.                          id: Date.now(),
  94.                          user: '小马',
  95.                          content: '我姓马，马云的马'
  96.                      },
  97.                  ]
  98.              },
  99.              created() { //在创建的时候就调用加载函数。
  100.                  this.loadComments();
  101.              },
  102.              methods: {
  103.                  loadComments(){ //从本地的localStorage中加载列表
  104.                      var list = JSON.parse(localStorage.getItem('cmts') || '[]');
  105.                      this.list = list;
  106.                  }
  107.              },
  108.              components: {
  109.                  comment: commentBox
  110.              }
  111.          })
  112.      </script>
  113.  </body>
  114.  
  115.  </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. Javadoc转换chm帮助文档的四种方法总结

    1) 将现有的 html 文件集(比如 api) 制作成chm 文档 http://www.blogjava.net/lishunli/archive/2010/01/07/308618.html 我 ...

  2. Linux------使用Xfpt6连接阿里云ECS服务器

    1.安装Xftp6,直接下一步到安装完成就可以了 2.新建文件传输 3.新建会话 4.填写会话信息 5.点击“连接”即可

  3. VS F5不编译 F5总是重新编译

    遇到奇怪的现象,F5不编译了 右键解决方案-配置管理器-确保项目的生成被勾选 另外一个情况,即使不修改任何代码,每次点击“生成”或者F5,都会重新编译(Debug模式没问题,Release有这个问题, ...

  4. python接口自动化测试（七）unittest 生成测试报告

    用例的管理问题解决了后,接下来要考虑的就是报告我问题了,这里生成测试报告主要用到 HTMLTestRunner.py 这个模块,下面简单介绍一下如何使用: 一.下载HTMLTestRunner下载: ...

  5. thymeleaf(二）

    项目demo     http://pan.baidu.com/s/1wg6PC 学习资料网址  http://www.blogjava.net/bjwulin/archive/2013/02/07/ ...

  6. java实现爬虫功能

    /** * 爬取新闻信息,封装成实体bean */public class GetNews { public List<News> getNews() {  // 存储新闻对象  List ...

  7. plsql中文乱码

    一.关于PLSQL无法正确显示中文 刚才下载安装了PLSQL Developer 9.0.0.1601 汉化绿色版,执行SQL查询语句,发现显示的数据中只要有中文都会以?表示. 原因:客户端跟服务器的 ...

  8. laravel 5.4 导出excel表格

    1.在laravel根目录下面找到一个composer.json文件 打开并在require下面加上一句话,如图所示: 注:以后这个excel的版本号可能还会修改 2.执行 composer inst ...

  9. 类似于Mimikatz的Linux Hash Dump工具

    项目主页 https://github.com/huntergregal/mimipenguin 需要root权限 支持 Kali 4.3.0 (rolling) x64 (gdm3) Ubuntu ...

  10. django cookies与session

    1. cookiies # cookies def login(request): print('COOKIES',request.COOKIES) print('SESSION',request.s ...