1. 程式人生 > >Vue評論組件案例

Vue評論組件案例

-- || rop one 測試 成熟 v-cloak dev text

最近學習了Vue前端框架,在這裏記錄一下組件的用法,我自己試著寫了一個評論的組件,大神看到勿噴,歡迎提出寶貴意見。

首先看一下效果圖

技術分享圖片

用到的文件有:

<link rel="stylesheet" href="../js/bootstrap/dist/css/bootstrap.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="../js/Ionicons/css/ionicons.min.css"> <!-- jQuery 3 --> <script src="../js/jquery/dist/jquery.min.js"></script> <!-- Bootstrap 3.3.7 --> <script src="../js/bootstrap/dist/js/bootstrap.min.js"></script> <!-- vue --> <script src="../js/vue.js"></script>

demo下載地址:https://download.csdn.net/download/qingchundaima/10842714

話不多說直接上代碼,基本註釋我都寫全了,這裏我沒有將js和html文件分開直接在html

<!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>Document</title> <link rel="stylesheet" href="../js/bootstrap/dist/css/bootstrap.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="../js/Ionicons/css/ionicons.min.css"> <!-- jQuery 3 --> <script src="../js/jquery/dist/jquery.min.js"
></script> <!-- Bootstrap 3.3.7 --> <script src="../js/bootstrap/dist/js/bootstrap.min.js"></script> <!-- vue --> <script src="../js/vue.js"></script> <style> [v-cloak] { display: none } .tb_comment{ width: 100%; /* border: 1px solid; */ } .tb_comment img{ width:64px; height:64px; } .tb_user{ width: 80px; } /* 用戶評論內容展示 */ .div_comment_content{ padding: 6px 12px; border: 1px solid #d2d6de; background-color: #f0f8ff; } </style> </head> <body> <div class="row" id="app" v-cloak> <div class=‘row‘> <div class="col-md-3"></div> <div class="col-md-6"> <!-- comment_item:傳遞給子組件數據 comment_data:父組件裏定義的數據 --> <!-- id子父組件裏我都定義成id----當前評論資源id --> <!-- prentsendcomment:在子組件裏調用父組件發表方法的名稱 sendcomment:父組件裏發表方法 --> <!-- prentsendsupport:子組件裏調用父組件點贊方法名稱 sendsupport:父組件裏點贊方法 --> <!-- prentsendopposition:子組件裏調用父組件反對方法名稱 sendopposition:父組件裏反對方法 --> <temp_comment v-bind:comment_item="comment_data" v-bind:id="id" @prentsendcomment="sendcomment" @prentsendsupport="sendsupport" @prentsendopposition="sendopposition"> </temp_comment> </div> <div class="col-md-3"></div> </div> </div> <!-- 評論組件html代碼結構 --> <template id=‘tp_comment‘> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">歡迎您發表評論</h3> </div> <div class="panel-body form-check-inline"> <label style="color:gray">請勿發表與本片無關的主題,評論需要審核</label> <textarea class="form-control" style="resize:none;" rows="5" placeholder="說點什麽吧..." maxlength="20" v-model="input_comment"> </textarea> <span class="pull-right">還能輸入<b style="color:red">{{surplus}}</b>/{{total}}</span><br> <input type="button" class="pull-right btn btn-primary" value="發表" @click="btnsend"> <div v-for="item in comment_item" :key="item.Id"> <table class="tb_comment table table-condensed"> <tbody> <tr> <td class="tb_user"> <img class="img-circle" v-bind:src="item.PortraitUrl"> </td> <td> <p>{{item.NickName}} &nbsp;&nbsp;<i class="glyphicon glyphicon-time"></i>&nbsp;{{item.CreateTime|date}} <span class="pull-right"> <a href="#" @click.prevent="btnsupport(item.Id)"> <i class=" glyphicon glyphicon-thumbs-up"></i>&nbsp;({{item.SupportNum}})</a> &nbsp;&nbsp; <a href="#" @click.prevent="btnopposition(item.Id)"><i class=" glyphicon glyphicon-thumbs-down"></i>&nbsp;({{item.OppositionNum}})</a> </span> </p> <div class=‘div_comment_content‘> {{item.CommentContent}} </div> </td> </tr> </tbody> </table> </div> <table class="tb_comment table table-condensed" v-if="comment_item.length==0"> <tbody> <tr> <td class="text-muted" style="width:100%"> <h4>暫無評論...</h4> </td> </tr> </tbody> </table> </div> </div> </template> <script> window.onload = function (ev) { // 定義評論組件 var temp_comment = { template: #tp_comment, // 組件裏的數據必須是方法返回。 data: function () { return { input_comment: ‘‘,// 輸入的評論 total: 200,// 評論可輸入總字數 } }, // 父組件傳遞的消息列表 props: [comment_item, id], // 計算屬性 computed: { // 計算剩余可輸入字數 surplus: function () { return this.total - this.input_comment.length; }, }, // 自定義過濾器 filters: { // 時間過濾器 "date": function (d) { var newdate = new Date(d); y = newdate.getFullYear(); m = (newdate.getMonth() + 1).toString().padStart(2, 0); d = newdate.getDay().toString().padStart(2, 0); hh = newdate.getHours().toString().padStart(2, 0); mm = newdate.getMinutes().toString().padStart(2, 0); ss = newdate.getSeconds().toString().padStart(2, 0); return y + - + m + - + d + + hh + : + mm + : + ss } }, // 方法 methods: { // 父組件傳入的發表評論方法,由子組件調用父組件發表評論方法 btnsend: function () { // 調用父組件方法。 this.$emit(prentsendcomment, this.id, this.input_comment) }, // 評論點贊 btnsupport: function (id) { // 調用父組件方法。 this.$emit(prentsendsupport, id) }, // 評論反對 btnopposition: function (id) { // 調用父組件方法。 this.$emit(prentsendopposition, id) } } } var vm = new Vue({ el: #app, data: { id: 12, // 測試數據 comment_data: [ { Id: 1, PortraitUrl: "../images/user2-160x160.jpg", NickName: 那年初夏, CommentContent: 勸君更敬一杯酒, SupportNum: 14, OppositionNum: 323, CreateTime: new Date() }, { Id: 2, PortraitUrl: "../images/user2-160x160.jpg", NickName: 列夫托爾斯泰, CommentContent: 這個部電影指的我們去好好看看。, SupportNum: 2312, OppositionNum: 33, CreateTime: new Date() }, { Id: 3, PortraitUrl: "../images/user2-160x160.jpg", NickName: 小怪獸, CommentContent: 千萬不要下載,千萬不要下載,千萬不要下載,我活了34年,這種爛片,第一次見難道比純潔心靈還要爛》?, SupportNum: 23, OppositionNum: 43, CreateTime: new Date() }, { Id: 4, PortraitUrl: "../images/user2-160x160.jpg", NickName: 帥大叔, CommentContent: 到菜市場買菜,看到一個孩子在看攤,我問:“一只雞多少錢?” 那孩子回答:“23。” 我又問:“兩只雞多少錢?” 孩子楞了一下,一時間沒算過來,急中生智大吼一聲:“一次只能買一只!”, SupportNum: 56, OppositionNum: 55, CreateTime: new Date() }, { Id: 5, PortraitUrl: "../images/user2-160x160.jpg", NickName: 夏末, CommentContent: 版權歸作者所有,任何形式轉載請聯系作者。作者:電影幕後故事(來自豆瓣)來源:https://movie.douban.com/review/9666136/郭敬明當作家遠不如當商人成功。當作家寫出來的那些不知所雲、虛到不行的句子只能騙一騙心智不成熟的小孩子;但做商人時所展現出來的精明與虛偽倒是能騙過不少人。我指的就這部披著“反校園霸淩”外衣,實則還是矯情、無病呻吟的電影。, SupportNum: 78, OppositionNum: 23, CreateTime: new Date() }, { Id: 6, PortraitUrl: "../images/user2-160x160.jpg", NickName: 羅罔極, CommentContent: 前陣子,我犯了個錯。 我在文章裏說,當下的大陸喜劇,有兩大派系分庭抗禮。 一派是徐崢寧浩,其作品核心偏於人間悲劇; 一派是開心麻花,其作品核心偏於純粹喜劇。 沒想到,現在又殺出個程咬金。 八年醞釀,慢工打磨。 導演、編劇:黃渤。 這一出手,就震驚四座—— 《一出好... , SupportNum: 332, OppositionNum: 33, CreateTime: new Date() }, ] }, // 註冊組件 components: { temp_comment: temp_comment, }, // 方法 methods: { getdata: function () { var list = JSON.parse(localStorage.getItem(cmts) || []) this.list = list; }, // 由子組件調用後傳入評論資源的id和內容 sendcomment: function (id, content) { alert(id + ------ + content) }, // 子組件觸發點贊 sendsupport: function (id) { alert(id) }, // 子組件觸發反對 sendopposition: function (id) { alert(id) } }, beforeCreate() { // 這時候data 和methods 都還沒有被初始化,所以訪問不到getdata }, created() { this.getdata(); } }) }; </script> </body> </html>

Vue評論組件案例