<!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="">評論內(nèi)容：</label>
????????????????<textarea?style="width:?100%;"??v-model='content'></textarea>
????????????</div>
????????????<div>
????????????????<input?type="button"?value="發(fā)表評論"?@click='postComment'>
????????????</div>
????????</div>
????</template>
????<script>
????????//?定義一個子組件，commentBox?為名稱?后面的{}對象為模板配置
????????var?commentBox?=?{
????????????template:?'#tmpl',//子組件模板?ID?指示
????????????data(){?//子組件的data是一個函數(shù)，return?回一個{對象}
????????????????return?{
????????????????????user:?'',//子組件里的變量要到子組件中定義
????????????????????content:?''
????????????????}?
????????????},
????????????methods:?{
????????????????postComment(){?//發(fā)表評論
????????????????????//分析:發(fā)表評論的業(yè)務(wù)邏輯
????????????????????//1.評論數(shù)據(jù)哪去了？存放到?localStorage?本地存儲中
????????????????????//2.先輸出一個最新的評論對象
????????????????????//3.目的：把最新的評論對象存到?localStorage?中?步驟：
????????????????????//?3.1調(diào)用?localStorage.getItem()?獲取之前的數(shù)據(jù)(string)=>
????????????????????//????再用?JSON.parse()?方法將獲取到的字符串數(shù)據(jù)?轉(zhuǎn)換為：數(shù)組{對象}
????????????????????//?3.2將最新評論?{對象}?push?到3.2中的數(shù)組對象，再用?localStorage.setItem()方法將最
????????????????????//?新數(shù)據(jù)保存到?localStorage?中---數(shù)據(jù)打包完畢
????????????????????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>
