使用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 ...
随机推荐
- vue嵌套路由 && 404重定向
第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...
- C++ Memory System Part3 : 优化
前面的系列我们讲了自定义new和delete操作,其中针对deleteArray的问题还有需要优化的地方.我们这次就针对POD类型进行一次优化. 下面的代码是针对POD类型的模板函数实现,分别为New ...
- 数据挖掘：提取百度知道QA中的影视信息
1. 背景 网站上爬取了部分关于影视的百度知道QA,为了后续提高影视的搜索效果,需要基于百度知道QA的答案抽取相关的影视信息. 2. 流程 目前已有基础的媒资视频库信息,基于媒资视频库中的视频名称,构 ...
- 用Gvim建立IDE编程环境 （Windows篇）
转自:http://my.oschina.net/kontor/blog/50717 0.准备软件及插件.(a)gvim72.exe 地址ftp://ftp.vim.org/pub/vim/pc/gv ...
- 图像文字识别(OCR)用什么算法小结
说明:主要考虑深度学习的方法,传统的方法不在考虑范围之内. 1.文字识别步骤 1.1detection:找到有文字的区域(proposal). 1.2classification:识别区域中的文字. ...
- 小程序中搜索文件，阅览pdf，分享文件链接，评论表情符号
小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号 https://blog.csdn.net/hotqin888/article/details/84111389 小程序中打开网页和pdf h ...
- 在 Linux 上创建第一个 Service Fabric Java 应用程序
先决条件 开始之前,请安装 Service Fabric SDK.Azure CLI,并在 Linux 开发环境中设置开发群集. 如果使用 Mac OS X,则可使用 Vagrant 在虚拟机中设置 ...
- 模糊查询-动态参数，防SQL注入
WHERE("title like '%'+#{keyWord}+'%'"); -MS SQL WHERE("title like concat('%',#{keyWor ...
- node.js发邮件
在node上使用第三方类库(nodemailer)发邮件是一件很esay的事情:) app.js 以QQ邮箱为例 var nodemailer = require('nodemailer'); v ...
- java基础--常用函数总结
java基础--常用函数总结 2019-3-16-23:28:01-----云林原创 1.split()字符串分割函数 将一个字符串分割为子字符串,然后将结果作为字符串数组返回. 2.Math.flo ...