有一個(gè)頁(yè)面，下邊是評(píng)論列表，展示用戶的評(píng)論。在上面有一個(gè)發(fā)表框，有一發(fā)表按鈕，一點(diǎn)擊，就發(fā)展成功，展示到下方的評(píng)論框。存儲(chǔ)用localStorage
- 第一步，先把布局寫出來(lái)
<!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">
<title>發(fā)表評(píng)論</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<ul class="list-group">
<li class="list-group-item" v-for="(item, index) in list" :key = "item.id">
<span class="badge">評(píng)論人：{{ item.user }}</span>
{{ item.content }}
</li>
</ul>
</div>
</body>
</html>
<script>
new Vue({
el: "#app",
data: {
list: [
{id: Date.now(),user:"李白",content:"天生我才必有用"},
{id: Date.now(),user:"江小白",content:"勸君更進(jìn)一杯酒"},
{id: Date.now(),user:"小馬",content:"我行馬，風(fēng)吹草低見(jiàn)牛羊的馬"},
],
},
methods: {
}
});
</script>
渲染出來(lái)啊，哈哈哈，跟著老師寫案例還可以鞏固我的bootstrap，太棒了
接著寫發(fā)表評(píng)論的框
這個(gè)框，咱寫成一個(gè)組件
<comment-box></comment-box>
......
<template id="comment">
<div>
<div class="form-group">
<label for="">評(píng)論人：</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label for="">評(píng)論內(nèi)容：</label>
<textarea class="form-control"></textarea>
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" value="發(fā)表評(píng)論">
</div>
</div>
</template>
......
<script>
var commentBox = Vue.component("comment",{
template: "#comment"
});
new Vue({
el: "#app",
data: {
list: [
{id: Date.now(),user:"李白",content:"天生我才必有用"},
{id: Date.now(),user:"江小白",content:"勸君更進(jìn)一杯酒"},
{id: Date.now(),user:"小馬",content:"我行馬，風(fēng)吹草低見(jiàn)牛羊的馬"},
],
},
methods: {
},
components: {
commentBox
}
});
</script>
image.png
實(shí)現(xiàn)發(fā)表功能
需要使用雙向數(shù)據(jù)綁定，獲取用戶輸入的評(píng)論人和評(píng)論內(nèi)容，再講這些數(shù)組合成一個(gè)object，push到我們數(shù)組list的最后面
<input type="text" class="form-control" v-model="user">
<textarea class="form-control" v-model="content"></textarea>
<input type="button" class="btn btn-primary" value="發(fā)表評(píng)論" @click="postComment">
........
var commentBox = Vue.component("comment",{
template: "#comment",
data: function(){
return {
user: "",
content:"",
}
},
methods: {
postComment(){
let object = {id: Date.now(), user: this.user,content: this.content};
this.list.push(object);
}
},
});
火急火燎地去測(cè)試，出現(xiàn)bug了??，為啥？因?yàn)閘ist是父組件的
有老師帶著寫，就是不一樣
分析發(fā)表評(píng)論的邏輯
- 1.評(píng)論數(shù)據(jù)存到哪里去，存到localStorage里
- 2.先組織出一個(gè)最新的評(píng)論數(shù)據(jù)
- 3.把第二步中得到的評(píng)論對(duì)象保存到localStorage里面去
- 3.1 localStorage只支持存放字符串?dāng)?shù)據(jù)，要先調(diào)用JSON.stringfy序列化
- 3.2在保存最新的評(píng)論數(shù)據(jù)之前，要先獲取以前的評(píng)論數(shù)據(jù)（String類型），轉(zhuǎn)為一個(gè)數(shù)組對(duì)象（JSON.parse函數(shù)），然后把最新的評(píng)論unshift存到數(shù)組最前面
- 3.3如果以前沒(méi)有發(fā)表過(guò)的話，JSON.parse的時(shí)候就會(huì)報(bào)錯(cuò)---3.2步會(huì)有一個(gè)潛在的bug，如果localStorage里的評(píng)論數(shù)組轉(zhuǎn)為空或不存在的時(shí)候，則可以返回一個(gè)"[]"讓JSON.parse去轉(zhuǎn)換
- 3.4把最新的評(píng)論列表數(shù)據(jù)再次調(diào)用JSON.stringfy轉(zhuǎn)為數(shù)組字符轉(zhuǎn)，調(diào)用lolcaStorage.setItem()存儲(chǔ)。
子組件的methods:
methods: {
postComment(){
let comment = {id: Date.now(), user: this.user,content: this.content};
var list = JSON.parse(localStorage.getItem("cmts") || "[]");
list.unshift(comment);
localStorage.setItem("cmts",JSON.stringify(list));
this.user = this.content = "";
}
},
哦耶，數(shù)組已經(jīng)正確的存儲(chǔ)起來(lái)了
最后，我們讓vue自動(dòng)渲染一下頁(yè)面
父組件里邊有刷新頁(yè)面數(shù)據(jù)的方法，但它不知道什么時(shí)候調(diào)用；子組件知道點(diǎn)擊“發(fā)表評(píng)論”按鈕時(shí)刷新頁(yè)面數(shù)據(jù)，但它沒(méi)有刷新頁(yè)面數(shù)據(jù)的方法。這里涉及到了父子組件之間的函數(shù)傳遞
<comment-box @fn1="localComments"></comment-box>
......
var commentBox = Vue.component("comment",{
......
methods: {
postComment(){
let comment = {id: Date.now(), user: this.user,content: this.content};
var list = JSON.parse(localStorage.getItem("cmts") || "[]");
list.unshift(comment);
localStorage.setItem("cmts",JSON.stringify(list));
this.user = this.content = "";
this.$emit("fn1");
}
},
});
new Vue({
el: "#app",
......
methods:{
localComments(){
this.list = JSON.parse(localStorage.getItem("cmts") || "[]");
},
},
created() {
this.localComments();
},
});
成功了
