Vue系列之 => 评论功能(小知识点串联)
<!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系列之 => 评论功能(小知识点串联)的更多相关文章
- 第 14 篇：交流的桥梁“评论功能”——HelloDjango 系列教程
截止到目前为止我们的 django blog 文章展示部分,已经实现的"八九不离十"了.你以为本系列文章就要结束了吗?不能够!新的征程才刚刚开始,HelloDjango 系列文章刚 ...
- React.js 小书 Lesson16 - 实战分析：评论功能（三）
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson16 转载请注明出处,保留原文链接和作者信息. 接下来的代码比较顺理成章了.修改 Commen ...
- React.js 小书 Lesson14 - 实战分析：评论功能（一）
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson14 转载请注明出处,保留原文链接和作者信息. 课程到这里大家已经掌握了 React.js 的 ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- React.js 小书 Lesson25 - 实战分析：评论功能（四）
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...
- Vue 变异方法splice删除评论功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~ demo原git ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2 实现评论功能
评论功能分析 上图可以看出评论功能主要实现了:评论的发布.评论列表的展示. 在不考虑子评论以及图片评论的场景下,评论功能主要有以下两个接口: 发布评论 获取评论列表(考虑分页) 评论 Model 的建 ...
- 手写 Vue 系列 之 从 Vue1 升级到 Vue2
前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...
随机推荐
- 【转】WPF自定义控件与样式(10)-进度控件ProcessBar自定义样
一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: ProcessBar自定义标准样式: ProcessBar自定义环形进 ...
- SpringBoot系统列 2 - 配置文件，多环境配置（dev，qa，online）
实现项目的多环境配置的方法有很多,比如通过在Pom.xml中配置profiles(最常见) 然后在Install项目打War包的时候,根据需求打不同环境的包,如图: 这种配置多环境的方法在SSM框架中 ...
- git 中merge的用法
git merge –no-ff 可以保存你之前的分支历史.能够更好的查看 merge历史,以及branch 状态. git merge 则不会显示 feature,只保留单条分支记录.
- Python学习笔记（一）：Python代码的打包与发布
在python程序中,一个.py文件被当作一个模块,在各个模块中定义了不同的函数.当我们要使用某一个模块中的某一个函数时,首先须将这个模块导入,否则就会出现函数未定义的情况. 下面记录的是打包及安装包 ...
- Java泛型知识点全方位总结
前言 我一直认为泛型是编程语言设计中一个非常基本和重要的概念.Java中的泛型是什么?他们为什么在那里?他们是如何发展的?在学习基础知识时,对仿制药的透彻理解是非常重要的.因此,我阅读了<Jav ...
- 真正让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦
转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的, ...
- IP地址在mysql的存储（IP地址和int的转换）
PHP echo ip2long('192.168.1.38'); 输出:3232235814 MYSQL SELECT INET_ATON('192.168.1.38'); 输出:323223581 ...
- MySQL 分页数据错乱重复
select xx from table_name wheere xxx order by 字段A limit offset;, 表数据总共 48 条,分页数量正常,但出现了结果混杂的情况,第一页的数 ...
- 更改oracle归档模式路径
1.更改归档路径 在ORACLE10G中,默认的归档路径为$ORACLE_BASE/flash_recovery_area.对于这个路径,ORACLE有一个限制,就是默认只能有2G的空间给归档日志使用 ...
- swust oj 956
约瑟夫问题的实现 2000(ms) 65535(kb) 3266 / 10775 n个人围成一个圈,每个人分别标注为1.2.....n,要求从1号从1开始报数 ,报到k的人出圈,接着下一个人又从1开始 ...