前言
最近在學習 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