使用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 ...
随机推荐
- 封装Lua for C#
http://blog.csdn.net/rcfalcon/article/details/5583095
- android studio 框架搭建：加入注解框架Annotations
参考github上的demo,新建一个project后,会有一个位于app文件夹下的局部build.gradle文件和一个位于根目录project下的全局build.gradle文件,我们要修改的是局 ...
- pat1015. Reversible Primes (20)
1015. Reversible Primes (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A r ...
- Windows与Unix思想
Unix与Windows的思想 Unix中的哲学是"一切皆文件",这里的一切皆文件是一个广泛的概念,有一些特殊的设备文件,在/dev目录下 物理设备在Unix中就对应一个特殊的设备 ...
- 【Shell】按行读取文件内容
方法1:while循环中执行效率最高,最常用的方法. function while_read_LINE_bottm(){ While read LINE do echo $LINE done < ...
- 给string添加新的函数
var str = "abcdefg";String.prototype.constr = function(){ return this.split('').join('-'); ...
- sql server数据库打不开
- Introduction of Servlet Filter（了解Servlet之Filter）
API文档中介绍了public Interface Filter(公共接口过滤器) Servlet API文档中是这样介绍的: ‘A filter is an object that performs ...
- springboot从入门到精通（二）
这一节我们一起用springboot开发一个应用程序,应用程序里的核心概念是玩家获取英雄列表上的英雄信息. 1.定义实体模型: 代码如下: package com.dota.herolist.enti ...
- PHP环境配置解释
PHP中注释:#,//,/* */ 一.修改Apache配置 DocumentRoot "G:\PHP" //修改完需要重启Apache //以下二选一 ----- ...