vue組件實現(xiàn)發(fā)表評論功能
本文實例為大家分享了vue組件實現(xiàn)發(fā)表評論的具體代碼,供大家參考,具體內(nèi)容如下
今天看了vue相關(guān)的視頻,所以跟著做一個小demo把知識串聯(lián)起來,內(nèi)容很簡單但是也算是學習道路上的一點進步。
1 思路分析
發(fā)表評論模塊寫入一個組件,提高復(fù)用性。
關(guān)鍵點:
1)、子組件通過localStorage向父組件傳值
2)、子組件有自己的data存儲user和content,即評論人和評論內(nèi)容,也就是dom元素綁定的數(shù)據(jù)。
3)、點擊‘發(fā)表評論’后,首先是將各條評論存入localStorage,然后通過在組件出綁定的函數(shù)調(diào)用父組件中的loadComments()加載評論。
4)、vue生命周期的熟悉。在created()中寫入loadComments(),每次頁面加載就會載入評論數(shù)據(jù)。
2 源代碼
需要vue.js和bootstrap.js兩個文件
<!DOCTYPE html> <html> <head> ? ? <meta charset="utf-8" /> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <title>Page Title</title> ? ? <meta name="viewport" content="width=device-width, initial-scale=1"> ? ? <script src="../lib/vue.js"></script> ? ? <link rel="stylesheet" href="../lib/bootstrap.css"> ? ? <style> ? ? li{ ? ? ? ? list-style:none; ? ? } ? ? </style> </head> <body> ? ? <div id="app"> ? ? ? ? <com @func="loadComments"></com> ? ? ? ? <ul class="list-group"> ? ? ? ? ? ? <li class="list-group-item" v-for="item in list"> ? ? ? ? ? ? ? ? {{item.content}}<span class="badge">{{item.user}}</span> ? ? ? ? ? ? </li> ? ? ? ? </ul> ? ? </div> ? ? ? ? <!-- 評論區(qū)組件 --> ? ? <template id="tmp"> ? ? ? ? <div> ? ? ? ? ? ? <div class="form-group"><label>評論人</label><input class="form-control" id="user" v-model:value="user"/></div> ? ? ? ? ? ? ?<div class="form-group"><label>評論內(nèi)容</label><input class="form-control" id="content" v-model:value="content"/></div> ?? ? ? ? ? ? ? ? ? <div><input type="button" class="btn btn-primary" value="發(fā)表評論" @click="postComments"/></div> ? ? ? ? </div> ? ? </template> ? ? <script> ? ? var tmp={ ? ? ? ? template:"#tmp", ? ? ? ? data:function(){ ? ? ? ? ? ? return { ? ? ? ? ? ? ? ? user:'', ? ? ? ? ? ? ? ? content:'' ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? methods:{ ? ? ? ? ? ? postComments(){ ? ? ? ? ? ? ? ? var comment={user:this.user,content:this.content}; ? ? ? ? ? ? ? ? var list=JSON.parse(localStorage.getItem('cmts')||'[]'); ? ? ? ? ? ? ? ? list.unshift(comment); ? ? ? ? ? ? ? ? localStorage.setItem('cmts',JSON.stringify(list));//數(shù)組對象和字符串相互轉(zhuǎn)換的過程 ? ? ? ? ? ? ? ? this.user=''; ? ? ? ? ? ? ? ? this.content=''; ? ? ? ? ? ? ? ? this.$emit('func'); ? ? ? ? ? ? } ? ? ? ? } ? ? } ? ? var vm=new Vue({ ? ? ? ? el:"#app", ? ? ? ? data:{ ? ? ? ? ? ? list:[] ? ? ? ? }, ? ? ? ? created(){ ? ? ? ? ? ?this.loadComments(); ? ? ? ? }, ? ? ? ? methods:{ ? ? ? ? ? ? loadComments(){ ? ? ? ? ? ? ? ? this.list=JSON.parse(localStorage.getItem('cmts')||'[]'); ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? components:{ ? ? ? ? ? ? 'com':tmp ? ? ? ? } ? ? ? ?? ? ? }); ? ? </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Nuxt內(nèi)導(dǎo)航欄的兩種實現(xiàn)方式
這篇文章主要介紹了詳解Nuxt內(nèi)導(dǎo)航欄的兩種實現(xiàn)方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04vue+element創(chuàng)建動態(tài)的form表單及動態(tài)生成表格的行和列
這篇文章主要介紹了vue+element創(chuàng)建動態(tài)的form表單及動態(tài)生成表格的行和列 ,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05Vue?vant-ui框架實現(xiàn)上拉加載下拉刷新功能
功能需求——獲取后端接口返回的數(shù)據(jù),實現(xiàn)列表數(shù)據(jù)上滑加載更多下一頁數(shù)據(jù),下拉數(shù)據(jù)刷新功能,結(jié)合vant-ui框架實現(xiàn)??芍苯訁⒖际褂?/div> 2022-09-09Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue?el-input設(shè)置必填提示功能(單個與多個)
有的功能需要設(shè)置必填項,當然也需要判斷是不是添上了,下面這篇文章主要給大家介紹了關(guān)于vue?el-input設(shè)置必填提示功能(單個與多個)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02最新評論