使用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>

View Code

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})}}}

View Code

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);}}}

View Code

分好模块化

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>

View Code

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}}

View Code

注意

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;

View Code

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);}}
};

View Code

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}};

View Code

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: 1;
}
.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;
}

View Code

posted @ 2018-11-20 14:03 韦邦杠阅读(...) 评论(...) 编辑收藏

使用Vue做评论+localStorage存储（js模块化）相关推荐

基于vue练习demo：发表评论案例 (使用localStorage存储数据)
前言最近在学习 VUE的相关知识,之前学习html和css3和原生js及jq库时感觉还挺轻松,但是接触vue框架之后才发现需要了解的东西太多了(如 vue-router,vue-cli,webpac ...
哟，2020年了！试着用vue做一个自己的小程序吧~~
Table of Content 前言 1. 生命周期 1. Vue的生命周期 2. 微信小程序页面生命周期 3. uni-app生命周期 1. 应用生命周期 2. 页面生命周期 2. 项目搭建 1. ...
js define函数_聊聊JS模块化发展历程
1 引言如今,Javascript 模块化规范非常方便.自然,但这个新规范仅执行了2年,就在 4 年前,js 的模块化还停留在运行时支持,10 年前,通过后端模版定义.注释定义模块依赖.对经历过来的 ...
Node.js模块化开发（非常详细，满满的干货）
下面是对Node.js模块化开发的整理,西洼港可以帮助到有需要的小伙伴~ 文章目录 Node.js模块化开发 JavaScript开发弊端 Node.js模块化开发模块成员导出的export方法模 ...
JS模块化 + 打包工具webpack5
「模块化」是思想 Summarize From [「前端工程化」之 Webpack 原理与实践(彻底搞懂吃透 Webpack)汪磊原版] 文章目录 ==模块化的演变过程== 文件划分方式(全靠约定) ...
模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1.Node.js模块化开发 1.1 JavaScript开发弊端 JavaScript 在使用时存在两大问题,文件依赖和命名冲突. 1.2 软件中的模块化开发一个功能就是一个模块,多个模块可以组成 ...
AMD and CMD are dead之js模块化黑魔法
缘由在2013-03-06 13:58的时候,曾甩下一片文章叫:<为什么不使用requirejs和seajs>,并放下豪言说发布一款完美的模块化库,再后来就把那篇文章删了,再然后就没有然 ...
从头开始写框架(一):浅谈JS模块化发展
博客申请下来已经过去一个月了,一直不知道写点什么,毕竟我的文笔不是很好orz. 不过既然申请下来了,不写点什么总是觉得很可惜.正好最近在自己写框架,就把自己的进程和一些心得体会分享出来吧. 写在前面: ...
JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的下面的代 ...
js模块化编程之彻底弄懂CommonJS和AMD/CMD！
为什么80%的码农都做不了架构师?>>> 先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前 ...

使用Vue做评论+localStorage存储（js模块化）

使用Vue做评论+localStorage存储（js模块化）

未分模块化

分好模块化

使用Vue做评论+localStorage存储（js模块化）相关推荐

最新文章

热门文章