vue組件實現(xiàn)發(fā)表評論功能

更新時間：2022年04月15日 17:16:07 作者：ljs_coding

這篇文章主要為大家詳細介紹了vue組件實現(xiàn)發(fā)表評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue組件實現(xiàn)發(fā)表評論的具體代碼，供大家參考，具體內(nèi)容如下

今天看了vue相關的視頻，所以跟著做一個小demo把知識串聯(lián)起來，內(nèi)容很簡單但是也算是學習道路上的一點進步。

1 思路分析

發(fā)表評論模塊寫入一個組件，提高復用性。
關鍵點：

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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: