<!DOCTYPE html>
<html lang="zh">
?? ?<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="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
?? ??? ?<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.css" />
?? ?</head>
?? ?<body>
?? ??? ?<div id="app">
?? ??? ??? ?<div class="container">
?? ??? ??? ??? ?<div class="row">
?? ??? ??? ??? ??? ?<div class="col-md-6 offset-md-3">
?? ??? ??? ??? ??? ??? ?<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 badge-pill badge-dark float-right">評論人:{{item.user}}</span>
?? ??? ??? ??? ??? ??? ??? ??? ?<span class="float-right" style="position: relative;right: 60px;">{{ item.ctime | dateFormat() }}</span>
?? ??? ??? ??? ??? ??? ??? ??? ?{{item.content}}
?? ??? ??? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>

?? ??? ?<template id="tmpl">
?? ??? ??? ?
?? ??? ??? ?<div>
?? ??? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ??? ?<label for="comment">評論人:</label>
?? ??? ??? ??? ??? ?<input type="text" id="comment" class="form-control" v-model="user" />
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ??? ?<label for="commentText">評論內(nèi)容:</label>
?? ??? ??? ??? ??? ?<textarea id="commentText" class="form-control" v-model="content">
?? ??? ??? ??? ?
?? ??? ??? ??? ??? ?</textarea>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ??? ?<div class="form-group">
?? ??? ??? ??? ??? ?<input type="button" value="發(fā)表評論" class="btn btn-primary" @click="postComment" />
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ??? ?
?? ??? ?</template>


?? ??? ?<script type="text/javascript">
?? ??? ??? ?
?? ??? ??? ?// 全局過濾器 時間格式化
?? ??? ??? ?// 所謂的全局過濾器，就是所有的VM實例都共享的
?? ??? ??? ?Vue.filter('dateFormat',function(dateStr,pattern=""){
?? ??? ??? ??? ? // 根據(jù)給定的時間字符串，得到特定的時間
?? ??? ??? ??? ??
?? ??? ??? ??? ?var dt = new Date(dateStr)
?? ??? ??? ??? ?
?? ??? ??? ??? ?// ? yyyy-mm-dd
?? ??? ??? ??? ?var year = dt.getFullYear()
?? ??? ??? ??? ?
?? ??? ??? ??? ?var month = (dt.getMonth() + 1).toString().padStart(2,'0')
?? ??? ??? ??? ?
?? ??? ??? ??? ?var day = dt.getDate().toString().padStart(2,'0')
?? ??? ??? ??? ?
?? ??? ??? ??? ?// return `${year}-${month}-${day}`
?? ??? ??? ??? ?
?? ??? ??? ??? ?if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
?? ??? ??? ??? ??? ?return `${year}-${month}-${day}`
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?var hh = dt.getHours().toString().padStart(2,'0')
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var mm = dt.getMinutes().toString().padStart(2,'0')
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var ss = dt.getSeconds().toString().padStart(2,'0')
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?return `${year}-${month}-${day} ${hh}:${mm}:${ss}`
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?})
?? ??? ??? ?
?? ??? ??? ?var commentBox = {
?? ??? ??? ??? ?data() {
?? ??? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ??? ?user: '',
?? ??? ??? ??? ??? ??? ?content: '',
?? ??? ??? ??? ??? ??? ?ctime:new Date()
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?template: '#tmpl',
?? ??? ??? ??? ?methods: {
?? ??? ??? ??? ??? ?postComment() {
?? ??? ??? ??? ??? ??? ?// ?localStorage 只支持存放字符串?dāng)?shù)據(jù)， 要先調(diào)用 JSON.stringify?
?? ??? ??? ??? ??? ??? ?// ?在保存 最新的 評論數(shù)據(jù)之前，要先從 localStorage 獲取到之前的評論數(shù)據(jù)（string）， 轉(zhuǎn)換為 一個 ?數(shù)組對象， 然后，把最新的評論， push 到這個數(shù)組
?? ??? ??? ??? ??? ??? ?// ?如果獲取到的 localStorage 中的 評論字符串，為空不存在， 則 ?可以 返回一個 '[]' ?讓 JSON.parse 去轉(zhuǎn)換
?? ??? ??? ??? ??? ??? ?// ?把 最新的 ?評論列表數(shù)組，再次調(diào)用 JSON.stringify 轉(zhuǎn)為 ?數(shù)組字符串，然后調(diào)用 localStorage.setItem()

?? ??? ??? ??? ??? ??? ?var comment = {
?? ??? ??? ??? ??? ??? ??? ?id: Date.now(),
?? ??? ??? ??? ??? ??? ??? ?user: this.user,
?? ??? ??? ??? ??? ??? ??? ?content: this.content,
?? ??? ??? ??? ??? ??? ??? ?ctime:this.ctime
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?// 從 localStorage 中獲取所有的評論
?? ??? ??? ??? ??? ??? ?var list = JSON.parse(localStorage.getItem('cmts') || '[]')

?? ??? ??? ??? ??? ??? ?list.unshift(comment)

?? ??? ??? ??? ??? ??? ?// 重新保存最新的 評論數(shù)據(jù)
?? ??? ??? ??? ??? ??? ?localStorage.setItem('cmts', JSON.stringify(list))

?? ??? ??? ??? ??? ??? ?this.user = this.content = ''

?? ??? ??? ??? ??? ??? ?this.$emit('func')

?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}

?? ??? ??? ?var vm = new Vue({
?? ??? ??? ??? ?el: '#app',
?? ??? ??? ??? ?data: {
?? ??? ??? ??? ??? ?list: []
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods: {
?? ??? ??? ??? ??? ?loadComments() {
?? ??? ??? ??? ??? ??? ?// 從本地的 localStorage 中，加載評論列表
?? ??? ??? ??? ??? ??? ?var list = JSON.parse(localStorage.getItem('cmts') || '[]')

?? ??? ??? ??? ??? ??? ?this.list = list

?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?components: {
?? ??? ??? ??? ??? ?'cmt-box': commentBox
?? ??? ??? ??? ?},
?? ??? ??? ??? ?created() {
?? ??? ??? ??? ??? ?this.loadComments()
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ?</script>

?? ?</body>
</html>

效果圖