效果图
效果图
起步
涉及知识：
- <code>vue父子组件</code>定义以及传值
- <code>H5 localStorage</code>
- <code>JSON.stringify()</code>和<code>JSON.parse()</code>
效果分析
页面构成
- 父组件包含评论列表
-
子组件包含评论人、评论内容以及评论时间
页面结构
发表评论功能[子组件]
- 先组织出一个最新的评论数据 如：<code>{user:'张三',content:'今天天气不错~'}</code>
- 定义变量<code>var list</code>。先从localStorage获取到之前评论数据(string)，转换为一个数组对象，<code>JSON.parse()</code>【从一个字符串中解析出json对象，再<code>localStorage.getItem('cmts')||'[]'</code>
- 把组织出的最新的评论数据push至list数组 如：<code>list.unshift(最新的评论数据)</code>
注：unshift()-----向数组的开头添加一个或多个元素，并且返回新的长度 - 把第一步得到的评论数据，保存到localStorage中
<code>注：</code>
4.1 localStorage只支持存放字符串数据，要先JSON.stringify。JSON.stringify()【从一个对象中解析出字符串】
4.2 把最新的评论列表数组，存入本地存储localStorage中，首先调用JSON.stringify转为数据字符串【localStorage只支持存放字符串数据】，然后调用localStorage.setItem('','') - 父组件把加载评论功能传递给子组件（子组件可以调用父组件函数），点击发表评论，从本地的localStoage中，加载评论列表 <code>$emit()</code>
加载评论列表[父组件]
- 定义变量<code>var list</code>。先从localStorage获取到之前评论数据(string)，转换为一个数组对象，<code>JSON.parse()</code>【从一个字符串中解析出json对象，再<code>localStorage.getItem('cmts')||'[]'</code>
- created()钩子函数开始执行时，从本地的localStoage中取出数据，加载评论列表
代码实现
页面构成
注：这里的样式均引用<code>bootstrap</code>
<div id="app">
<!--调用定义子组件 && 定义父组件函数-->
<cmt-box @func="loadComments"></cmt-box>
<!--评论列表-->
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人：{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<!--子组件：评论人、评论内容以及评论时间-->
<template id="tmp1">
<div>
<div class="form-group">
<label>评论人：</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
</div>
</div>
</template>
数据：
<script>
var commentBox={ //定义子组件
template:'#tmp1', //定义子组件模板对象
data(){
return {
user:'', //评论人
content:'' //评论内容
}
},
}
var vm=new Vue({ //父组件
el:'#app',
data:{
list:[
/*假数据*/
{id:Date.now(),user:'李白',content:'天生我材必有用'},
{id:Date.now(),user:'江小白',content:'劝君更尽一杯酒'}
]
},
/*注册子组件*/
components:{
'cmt-box':commentBox
}
});
</script>
发表评论功能[子组件]
methods:{
/*点击发表评论按钮触发函数*/
postComment(){
/*组织出一个最新的评论数据*/
var comment={id:Date.now(),user:this.user,content:this.content}
/*localStorage获取到之前评论数据(string)，转换为一个数组对象*/
var list=JSON.parse(localStorage.getItem('cmts')||'[]')
/*把组织出的最新的评论数据push至list数组*/
list.unshift(comment)
/*重新保存最新的评论*/
localStorage.setItem('cmts',JSON.stringify(list))
/*清空输入框*/
this.user=this.content=''
/*子组件调用父组件加载评论列表功能函数*/
this.$emit('func')
}
}
localStorage存入效果：[点击f12查看]
localStorage
加载评论列表[父组件]
methods:{
/*加载评论列表*/
loadComments(){
/*从本地的localStoage中，加载评论列表*/
var list=JSON.parse(localStorage.getItem('cmts')||'[]')
this.list=list
}
},
/*页面刚加载执行函数*/
created(){
this.loadComments()
},
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>评论功能</title>
<script src="vue.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<cmt-box @func="loadComments"></cmt-box>
<ul class="list-group">
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人：{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="tmp1">
<div>
<div class="form-group">
<label>评论人：</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
</div>
</div>
</template>
<script>
var commentBox={
template:'#tmp1',
data(){
return {
user:'',
content:''
}
},
methods:{
postComment(){
var comment={id:Date.now(),user:this.user,content:this.content}
var list=JSON.parse(localStorage.getItem('cmts')||'[]')
list.unshift(comment)
localStorage.setItem('cmts',JSON.stringify(list))
this.user=this.content=''
this.$emit('func')
}
}
}
var vm=new Vue({
el:'#app',
data:{
list:[
{id:Date.now(),user:'李白',content:'天生我材必有用'},
{id:Date.now(),user:'江小白',content:'劝君更尽一杯酒'},
{id:Date.now(),user:'小马',content:'我姓马，风吹草低见牛羊'}
]
},
methods:{
loadComments(){
var list=JSON.parse(localStorage.getItem('cmts')||'[]')
this.list=list
}
},
created(){
this.loadComments()
},
components:{
'cmt-box':commentBox
}
});
</script>
</body>
</html>
小结
- vue父子组件传函数方法:
- 父组件定义函数---loadComments(){ …… }
- 子组件定义父组件函数方法---@func="loadComments"
- 子组件引用父组件函数方法---this.$emit('func')
- H5 localStorage:
- localStorage中一般浏览器支持的是5M大小
- localStorage.setItem("key","value")：存储名字为key的一个值value，如果key存在，就更新value
- localStorage.getItem("key")：获取名称为key的值，如果key不存在则返回null
- localStorage.removeItem("key")：删除名称为"key"的信息，这个key所对应的value也会全部被删除
- localStorage.clear()：清空localStorage中所有信息
- JSON.stringify()和JSON.parse()
- JSON.parse(); 将字符串格式转换成JSON对象进行处理
- JSON.stringify(); 将JSON对象转换成字符串格式
来源我的博客：我的博客
网友评论