使用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 ...
随机推荐
- git win7 dos下设置代理
git config --global http.proxy http://username:pwd@my.you.com:port
- 生成ks.cfg文件
RHEL 7下生成ks.cfg文件 环境 + RHEL 7 + 字符界面, 没有安装图形界面 软件包安装 + `yum install system-config-kickstart -y` + `y ...
- FZU 2207 ——以撒的结合——————【LCA + 记录祖先】
Problem 2207 以撒的结合 Accept: 47 Submit: 161Time Limit: 1000 mSec Memory Limit : 32768 KB Proble ...
- RocketMQ3.2.6安装部署及调用
RocketMQ3.2.6安装部署及调用 1.RocketMQ部署架构 所有IP都是127.0.0.1,其中NameServer一个,Broker一个,Producer一个,Consumer一个 2. ...
- Sql Server 锁 排它锁 更新锁 共享锁
引用别人的.有时间整体整理下. 引用地址:http://www.cnblogs.com/wenjl520/archive/2012/08/24/2654412.html 锁的概述 一. 为什么要引入锁 ...
- 深入理解 Java 内存模型（转载）
摘要: 原创出处 http://www.54tianzhisheng.cn/2018/02/28/Java-Memory-Model/ 「zhisheng」欢迎转载,保留摘要,谢谢! 0. 前提 &l ...
- C#学习笔记11
1.List.BinarySearch():BinarySearch()采用的是二分搜索算法,要求元素已经排好序,其特点是假如元素没有找到,会返回一个负整数,该值的按位取反(~)结果是“大于被查找元素 ...
- PAT 1030 Travel Plan
#include <cstdio> #include <cstdlib> #include <vector> #include <queue> #inc ...
- rest-framework框架——视图三部曲
一.mixins类编写视图 1.配置url urlpatterns = [ ... re_path(r'^authors/$', views.AuthorView.as_view(), name=&q ...
- CSS3 常用新特性总结
更新于(2017.07.07)会总结项目中比较常用的有些CSS属性 伪类选择器 E:first-of-type: 匹配同类型中的第一个同级兄弟元素E E:last-of-type: 匹配同类型中的最后 ...