前言
最近在學習 VUE的相關知識，之前學習html和css3和原生js及jq庫時感覺還挺輕鬆，但是接觸vue框架之後才發現需要了解的東西太多了(如 vue-router，vue-cli，webpack，npm等等都得接觸到一些)，太龐雜了，因此因爲這一個月以來看的東西太多了腦殼有點兒懵，想了想先鞏固一下VUE的基礎再往後面進行，所以練習寫了這個 發表評論功能 的小玩意兒。
（emmmmmmmm…以上廢話可忽略）
實現功能
一個提交評論的表單區域（包括：評論人及評論內容，組件呈現）
評論列表顯示的區域（vue實例展現）
使用localStorage存儲數據使得刷新或關閉瀏覽器不影響評論數量
效果展示
代碼
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<!-- 評論列表展示區域 -->
<div id="app-listcomments">
<publish @func="getlocalinfo"></publish>
<br>
<div class="container">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id">
{{ item.content }}
<span class="badge badge-secondary badge-pill">{{ item.user }}</span>
</li>
</ul>
</div>
</div>
<!-- 提交評論的表單組件 -->
<template id="publish">
<div>
<div class="card border-info">
<div class="card-header">評論系統</div>
<div class="card-body">
<div class="container">
<form>
<div class="form-group">
<label for="user">
評論人:
</label>
<input type="text" class="form-control" id="user" v-model="user">
</div>
<div class="form-group">
<label for="content">
評論內容:
</label>
<textarea id="content" class="form-control" v-model="content"></textarea>
</div>
<input type="button" value="發表評論" class="btn btn-primary" @click="getinfo">
</form>
</div>
</div>
</div>
</div>
</template>
<script>
//組件創建（使用局部組件方式）
var publish = {
data() {
return {
user: '',
content: ''
}
},
template: "#publish",
methods: {
getinfo() {//獲得輸入框的user及content數據並更新到評論列表
if (this.user == '' || this.content == '') { //判斷輸入框是否爲空
alert("輸入框請不要留空白")
} else {
var info = {
id: Math.random(),
user: this.user,
content: this.content
} //獲取用戶輸入的數據存到info對象中
var list = JSON.parse(localStorage.getItem('cmts') || '[]') //獲取localstrage中的數據，字符串類型需要轉換爲json對象
list.push(info)//將得到的info對象的添加到list
localStorage.setItem('cmts', JSON.stringify(list))//將更新好的數據重新添加到localstrage
this.user = this.content = '' //清空輸入框
this.$emit('func')//更新頁面的評論列表
}
}
},
}
//vue實例部分創建
var listcomment = new Vue({
el: "#app-listcomments",
data: {
list: [{
id: Math.random(),
user: "林宥嘉",
content: "多久了我都沒變，愛你這回事整整六年"
},
{
id: Math.random(),
user: "華晨宇",
content: "看着飛舞的塵埃掉下來"
}
]
},
created() {
var localinfo = JSON.parse(localStorage.getItem('cmts') || '[]')
if (localinfo.length == 0) {
var list = this.list
localStorage.setItem('cmts', JSON.stringify(list))
}
this.getlocalinfo()
},
components: {
'publish': publish
},
methods: {
getlocalinfo() {
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
this.list = list
}
}
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>
原文地址： https://blog.csdn.net/weixin_43388844/article/details/86443883