实现功能：发表评论、本地存储、显示列表
- 页面加载，从本地localStorage中获得数据
- 子组件中，获取原数据，添加新数据，加入到localStorage
- 点击发表评论时，调用第二步定义的方法，重新加载数据
- 借助bootstrap页面布局，包含评论人、评论内容、提交按钮以及评论列表
- 定义子组件，子组件包含了评论人、评论内容、提交按钮
- 页面加载：
- methods定义方法：获得localStorage中的数据，转为数组对象，置为父组件中data定义的list，借助
v-for循环输出
2. 需要思考该方法何时调用，在那里调用（生命周期函数）
- methods定义方法：获得localStorage中的数据，转为数组对象，置为父组件中data定义的list，借助
- 当点击提交按钮时，
1.先从localStorage中获取数据localStorage.getItem('')
2.localStorage 只支持存放字符串数据，所以我们需要调用JSON.parse将字符串转为数组对象，这里就需要注意，localStorage列表可能为空或者不存在，那我们就需要转为一个空数组，而不是null，所以我们可以返回一个[]
3.将input框内的数据保存为一个对象，添加至获得的数组对象中，需注意，评论列表最新评论置于最上处，所以添加方法为unshift
3.之后我们需要将最新的数组对象存入localStorage中，但是 localStorage 只支持存放字符串数据，所以，调用JSON.stringify将数组对象转为字符串数据，调用localStorage.setItem保存至localStorage，最后将input框置为空
4.子组件绑定父组件方法this.$emit，当点击评论时，页面重新加载数据，调用父组件定义的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./bootstrap.min.css">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<addc @fn='renderList'></addc>
<ul class="list-group">
<li class="list-group-item" v-for="(item, index) in list" :key="index">{{item.ucom}}
<span class="badge">{{item.uname}}</span>
</li>
</ul>
</div>
<script id="tmp" type="text/x-template">
<div class="form-inline">
<div class="form-group">
<label>评论人：</label>
<input type="text" class="form-control" id="" v-model="user">
</div>
<div class="form-group">
<label>评论内容：</label>
<textarea type="text" class="form-control" id="" v-model="ucoms"></textarea>
</div>
<button type="submit" class="btn btn-primary" @click='add'>发表评论</button>
</div>
</script>
<script>
let comp = {
template: '#tmp',
data() {
return {
user: '',
ucoms: ''
}
},
methods: {
add() {
let cons = { id: new Date(), uname: this.user, ucom: this.ucoms }
let list = JSON.parse(localStorage.getItem('cusm') || '[]')//把列表转化成数组对象
list.unshift(cons)//追加到数组对象
//转化成新的字符串，放到localStorage里面
localStorage.setItem('cusm', JSON.stringify(list))
this.user = this.ucoms = ''//文本框清空
this.$emit("fn")
}
},
}
new Vue({
el: '#app',
data: {
// list: [
// { id: new Date(), uname: '张世超', ucom: '帅吗？' }
// ]
list: ''
},
methods: {
renderList() {
let nMsg = localStorage.getItem('cusm')
this.list = JSON.parse(nMsg)
},
},
components: {
// 注册组件
"addc": comp
},
created() {
this.renderList()
},
})
</script>
</body>
</html>
