使用Vue做评论+localStorage存储（js模块化）
未分模块化
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>评论模块</title>
<style>
#root{
width: 400px;
padding: 2em;
margin: 2em auto;
border: 1px solid #e0e0e0;
border-radius: 1em;
}
label{
display: flex;
margin: 1em 0;
}
</style>
</head>
<body>
<div id="root">
<c-input @wybc='zhendeyaobaocuoa'></c-input>
<c-list :comments="comments" @dodel="zhendeshanc"></c-list>
</div>
<script src="js/comment-input.js"></script>
<script src="js/comment-list.js"></script>
<script src="js/Vue.js"></script>
<script>
Vue.component('c-input',commentInput);
Vue.component('c-list',commentList);
Vue.component('comment',commentItem);
var app = new Vue({
el:"#root",
data:{
comments:[
]
},
methods:{
zhendeyaobaocuoa(res){
this.comments.push(res);
this.updaLocalStorage();
},
updaLocalStorage(){
localStorage.setItem("data",JSON.stringify(this.comments));
},
zhendeshanc(id){
this.comments=this.comments.filter((c) => c.id!=id)
this.updaLocalStorage();
}
},
created(){
const cs=localStorage.getItem("data");
if(cs){
this.comments=JSON.parse(cs);
}
}
})
</script> </body>
</html>
comment-input.js
var commentInput={
template:`
<div class='cinput'>
<label>
<span>用户名</span>
<input v-model='author'/>
</label>
<label>
<span>评论内容</span>
<textarea v-model='content'></textarea>
</label>
<button @click='doSave()'>发布</button>
</div>
`,
data(){
return {
author:'',
content:''
}},
methods:{
doSave(){
this.$emit('wybc',{
id:+new Date(),
author:this.author,
content:this.content
})
}
}
}
comment-list.js
var commentList={
props:['comments'],
template:`
<div class='clist'>
<comment v-for='c in comments'
v-bind:comment='c'
@dodel="dodel">
</comment>
</div>
`,
methods:{
dodel(id){
this.$emit("dodel",id);
}
}
};
var commentItem={
props:['comment'],
template:`
<div>
{{comment.author}}:
<span ></span>
<span>{{comment.content}}</span>
<a href @click.prevent='del'>删除</a>
</div>
`,
methods:{
del(){
this.$emit("dodel",this.comment.id);
}
}
}
分好模块化
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>评论模块</title>
<link rel="stylesheet" href="css/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="root">
<comment></comment>
</div> <script type="module"> import commentComp from './component/comment/comment-comp.js'; Vue.component('comment', commentComp); var vm = new Vue({
el: '#root'
}); </script>
</body>
</html>
comment-comp.js
import commentInput from './comment-input.js';
import commentList from './comment-list.js'; export default {
template:`
<div>
<cinput @wybc='zhendeyaobaocuoa' ></cinput>
<clist :comments="comments" @dodel="zhendeshanc"></clist>
</div>`,
data() { return {
comments: []
}},
methods:{
zhendeyaobaocuoa(res){
this.comments.push(res);
this.updaLocalStorage();
},
updaLocalStorage(){
localStorage.setItem("data",JSON.stringify(this.comments));
},
zhendeshanc(id){
this.comments=this.comments.filter((c) => c.id!=id)
this.updaLocalStorage();
}
},
created(){
const cs=localStorage.getItem("data");
if(cs){
this.comments=JSON.parse(cs);
}
},
components:{
cinput:commentInput,
clist:commentList
}
}
注意
comment-input.js
var commentInput={
template:`
<div class='cinput'>
<label>
<span>用户名</span>
<input v-model='author'/>
</label>
<label>
<span>评论内容</span>
<textarea v-model='content'></textarea>
</label>
<button @click='doSave()'>发布</button>
</div>
`,
data(){
return {
author:'',
content:''
}},
methods:{
doSave(){
this.$emit('wybc',{
id:+new Date(),
author:this.author,
content:this.content
})
}
}
}
export default commentInput;
comment-item.js
export default {
props:['comment'],
template:`
<div>
{{comment.author}}:
<span ></span>
<span>{{comment.content}}</span>
<a href @click.prevent='del'>删除</a>
</div>
`,
methods:{
del(){
this.$emit("dodel",this.comment.id);
}
}
};
comment-list.js
import commentItem from './comment-item.js';
export default{
props:['comments'],
template:`
<div class='clist'>
<comment v-for='c in comments'
v-bind:comment='c'
@dodel="dodel"
v-bind:key=c.id>
</comment>
</div>
`,
methods:{
dodel(id){
this.$emit("dodel",id);
}
},
components: {
comment: commentItem
}
};
index.css
#root {
width: 400px;
padding: 2em;
margin: 2em auto;
border: 1px solid #e0e0e0;
border-radius: 1em;
}
.cinput {
margin-bottom: 1em;
}
label {
display: flex;
margin: 1em 0;
}
label span {
flex-basis: 100px;
}
input, textarea {
flex:;
}
.cinput footer {
text-align: right;
}
.cinput button {
border: none;
background-color: orange;
padding: .4em 1em;
color: white;
font-size: 16px;
border-radius: 3px;
box-shadow: 1px 1px 1px #e0e0e0;
}
.comment {
padding: 1em;
border-bottom: 1px solid #f0f0f0;
display: flex;
}
.comment-author {
color: steelblue;
flex-basis: 80px;
}
.comment-delete {
margin-left: auto;
}
使用Vue做评论+localStorage存储（js模块化）的更多相关文章
- 使用Vue做个简单的评论 + localstorage存储
1.引入Vue.js 2.编写代码 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta c ...
- vue中使用localStorage存储信息
一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...
- Android WebView js混合cookie和localStorage存储
一.cookie存储和取出: (1)存储: ------------------- **在loadURL之前调用** -------------------- /** * 同步一下cookie */ ...
- 在vue中继续使用layer.js来做弹出层---切图网
layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...
- 使用sessionStorage、localStorage存储数组与对象（转）
http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...
- 闲聊——浅谈前端js模块化演变
function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...
- LocalStorage存储
1.localStorage存储服务: .factory('storageSvc', [function () { return { //保存数据 save: function (key, valu ...
- 使用sessionStorage、localStorage存储数组与对象
先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...
- 面试指南」JS 模块化、组件化、工程化相关的 15 道面试题
JS 模块化.组件化.工程化相关的 15 道面试题 1.什么是模块化? 2.简述模块化的发展历程? 3.AMD.CMD.CommonJS 与 ES6 模块化的区别? 4.它们是如何使用的? 5.exp ...
随机推荐
- Ruby初探
官方网站:https://www.ruby-lang.org/zh_cn/ 标准库API文档:http://ruby-doc.org/stdlib-2.3.0/ 简介特性安装Ruby 命令行选项编码语 ...
- 线程同步(windows平台)：信号量
一:介绍 信号量也是系统核心对象,它允许多个线程同一时刻访问同一资源,但需限制同一时刻访问资源的最大线程数目. 信号量遵循规则:1.当前资源计数大于0,信号量有效.2.当前资源计数等于0,信号量无效. ...
- 负载均衡服务器中存在大量的TIME_WAIT怎么解决
首先需要明白什么是TIME_WAIT.TIME_WAIT是在tcp断开连接时进行四次回收的时候,主动断开端在收到被动关闭端的FIN包并发送ACK包给被动关闭后进入的状态.这个状态默认情况下是2倍的MS ...
- 解决引入外部文件（图片、js等）出现 403 net::ERR_ABORTED 的问题
页面中引入外网的链接资源,会产生一个新的http请求.为了安全(URL里可能包含用户信息),浏览器一般都会给这写请求头加上表示来源的referrer 字段. 所以,此时我们需要隐藏外部链接中的refe ...
- 深入理解JavaScript系列（36）：设计模式之中介者模式
介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 主要内容来自:http://www ...
- 在List中常用的linq表达式
为了下面举例方便,先声明一个集合: public List<Model.Resume> GetResumeList() { var list = new List<Model.Res ...
- web.config节点
1.clientCache 源码: <system.webServer> <staticContent> <clientCache cacheControlMode=&q ...
- 三大集合框架之map
Map 是一种把键对象和值对象映射的集合,它的每一个元素都包含一对键对象和值对象. Map没有继承于Collection接口 从Map集合中检索元素时,只要给出键对象,就会返回对应的值对象. Map是 ...
- 应用——dubbo的基本使用
一.背景 dubbo是个什么? 首先要说的是,网上有很多高大上的回答,可自行百度,这里只说一些非常狭隘的东西: dubbo是一个分布式服务框架,我们一般用它进行远程方法调用.(分布式.远程方法调用下面 ...
- 大数据的正确用法你get到了吗？
Azure 镜像市场已于2016年9月21日正式上线,在这个统一的集成平台中,客户可以轻松地浏览.搜索和选择一系列来自第三方的应用和解决方案,并可以将其快速一键部署到 Azure 实例当中. 在移动为 ...