<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
<script src="https://cdn.staticfile.org/vue/2.6.12/vue.min.js"></script>
<style>
*,ul{
margin: 0;
box-sizing: border-box;
}
ul{
display: table;
width: 100%;
padding-left: 0px ;
}
li{
list-style-type: none;
border-bottom: darkgrey 1px solid;
padding: 5px 10px ;
height: 31px;
}
span{
border-radius: 25px;
background-color: grey;
color: lavenderblush;
font-size: 5px;
padding: 3px;
}
span{float: right;}
</style>
</head>
<body>
<div id="app"> <!-- view可视层 -->
<cmt-box @func='loadComments'></cmt-box> <!-- 子组件 -->
<ul> <!-- 父组件 -->
<li v-for='item in list' :key='item.id'>
<span>评论人：{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="tmpl"> <!-- 子组件模板 -->
<div> <!-- 一个根元素原则 -->
<div>
<label for="m">评论人：</label>
<input id="m" style="width: 100%;" stype="text" v-model='user'>
</div>
<div>
<label for="">评论内容：</label>
<textarea style="width: 100%;" v-model='content'></textarea>
</div>
<div>
<input type="button" value="发表评论" @click='postComment'>
</div>
</div>
</template>
<script>
// 定义一个子组件，commentBox 为名称 后面的{}对象为模板配置
var commentBox = {
template: '#tmpl',//子组件模板 ID 指示
data(){ //子组件的data是一个函数，return 回一个{对象}
return {
user: '',//子组件里的变量要到子组件中定义
content: ''
}
},
methods: {
postComment(){ //发表评论
//分析:发表评论的业务逻辑
//1.评论数据哪去了？存放到 localStorage 本地存储中
//2.先输出一个最新的评论对象
//3.目的：把最新的评论对象存到 localStorage 中 步骤：
// 3.1调用 localStorage.getItem() 获取之前的数据(string)=>
// 再用 JSON.parse() 方法将获取到的字符串数据 转换为：数组{对象}
// 3.2将最新评论 {对象} push 到3.2中的数组对象，再用 localStorage.setItem()方法将最
// 新数据保存到 localStorage 中---数据打包完毕
var comment = { id: Date.now(), user: this.user, content: this.content }
var listd = JSON.parse(localStorage.getItem('cmtss') ||'[]')
listd.unshift(comment)
localStorage.setItem('cmtss',JSON.stringify(listd))
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: "马化腾的马" }
]
},
created(){
this.loadComments()
},
methods:{
loadComments() {
// 从本地的 localStorage 中，加载评论列表
var list = JSON.parse(localStorage.getItem('cmtss') || '[]')
this.list = list
}
},
components: {
'cmt-box': commentBox
}
});
</script>
</body>
</html>
