最近学习了Vue前端框架，在这里记录一下组件的用法，我自己试着写了一个评论的组件，大神看到勿喷，欢迎提出宝贵意见。

首先看一下效果图

用到的文件有：

  1.  
  2. <link rel="stylesheet" href="../js/bootstrap/dist/css/bootstrap.min.css">
  3. <!-- Ionicons -->
  4. <link rel="stylesheet" href="../js/Ionicons/css/ionicons.min.css">
  5. <!-- jQuery 3 -->
  6. <script src="../js/jquery/dist/jquery.min.js"></script>
  7. <!-- Bootstrap 3.3.7 -->
  8. <script src="../js/bootstrap/dist/js/bootstrap.min.js"></script>
  9. <!-- vue -->
  10. <script src="../js/vue.js"></script>

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

话不多说直接上代码，基本注释我都写全了，这里我没有将js和html文件分开直接在html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <link rel="stylesheet" href="../js/bootstrap/dist/css/bootstrap.min.css">
  10.   <!-- Ionicons -->
  11.   <link rel="stylesheet" href="../js/Ionicons/css/ionicons.min.css">
  12.   <!-- jQuery 3 -->
  13.   <script src="../js/jquery/dist/jquery.min.js"></script>
  14.   <!-- Bootstrap 3.3.7 -->
  15.   <script src="../js/bootstrap/dist/js/bootstrap.min.js"></script>
  16.   <!-- vue -->
  17.   <script src="../js/vue.js"></script>
  18.   <style>
  19.     [v-cloak] {
  20.       display: none
  21.     }
  22.      .tb_comment{
  23.       width: 100%;
  24.       /* border: 1px solid; */
  25.     }
  26.     .tb_comment img{
  27.        width:64px;
  28.        height:64px;
  29.     }
  30.     .tb_user{
  31.       width: 80px;
  32.     }
  33.  
  34.          /* 用户评论内容展示 */
  35.       .div_comment_content{
  36.         padding: 6px 12px;
  37.         border: 1px solid #d2d6de;
  38.         background-color: #f0f8ff;
  39.       }
  40.  
  41.   </style>
  42.  
  43. </head>
  44.  
  45. <body>
  46.   <div class="row" id="app" v-cloak>
  47.     <div class='row'>
  48.       <div class="col-md-3"></div>
  49.       <div class="col-md-6">
  50.         <!-- comment_item:传递给子组件数据  comment_data：父组件里定义的数据 -->
  51.         <!-- id子父组件里我都定义成id----当前评论资源id -->
  52.         <!-- prentsendcomment：在子组件里调用父组件发表方法的名称 sendcomment：父组件里发表方法 -->
  53.         <!-- prentsendsupport:子组件里调用父组件点赞方法名称  sendsupport：父组件里点赞方法 -->
  54.         <!-- prentsendopposition：子组件里调用父组件反对方法名称  sendopposition：父组件里反对方法 -->
  55.         <temp_comment v-bind:comment_item="comment_data" v-bind:id="id" @prentsendcomment="sendcomment"
  56.           @prentsendsupport="sendsupport" @prentsendopposition="sendopposition">
  57.         </temp_comment>
  58.  
  59.       </div>
  60.       <div class="col-md-3"></div>
  61.  
  62.     </div>
  63.   </div>
  64.  
  65.   <!-- 评论组件html代码结构 -->
  66.   <template id='tp_comment'>
  67.     <div class="panel panel-primary">
  68.       <div class="panel-heading">
  69.         <h3 class="panel-title">欢迎您发表评论</h3>
  70.       </div>
  71.       <div class="panel-body form-check-inline">
  72.         <label style="color:gray">请勿发表与本片无关的主题，评论需要审核</label>
  73.         <textarea class="form-control" style="resize:none;" rows="5" placeholder="说点什么吧..." maxlength="20" v-model="input_comment"> </textarea>
  74.         <span class="pull-right">还能输入<b style="color:red">{{surplus}}</b>/{{total}}</span><br>
  75.         <input type="button" class="pull-right btn btn-primary" value="发表" @click="btnsend">
  76.         <div v-for="item in comment_item" :key="item.Id">
  77.           <table class="tb_comment table table-condensed">
  78.             <tbody>
  79.               <tr>
  80.                 <td class="tb_user">
  81.                   <img class="img-circle" v-bind:src="item.PortraitUrl">
  82.                 </td>
  83.                 <td>
  84.                   <p>{{item.NickName}} &nbsp;&nbsp;<i class="glyphicon glyphicon-time"></i>&nbsp;{{item.CreateTime|date}}
  85.                     <span class="pull-right">
  86.                       <a href="#" @click.prevent="btnsupport(item.Id)"> <i class="    glyphicon glyphicon-thumbs-up"></i>&nbsp;({{item.SupportNum}})</a>
  87.                       &nbsp;&nbsp;
  88.                       <a href="#" @click.prevent="btnopposition(item.Id)"><i class="    glyphicon glyphicon-thumbs-down"></i>&nbsp;({{item.OppositionNum}})</a>
  89.                     </span>
  90.                   </p>
  91.                   <div class='div_comment_content'>
  92.                     {{item.CommentContent}}
  93.                   </div>
  94.                 </td>
  95.               </tr>
  96.             </tbody>
  97.           </table>
  98.         </div>
  99.         <table class="tb_comment table table-condensed" v-if="comment_item.length==0">
  100.           <tbody>
  101.             <tr>
  102.               <td class="text-muted" style="width:100%">
  103.                 <h4>暂无评论...</h4>
  104.               </td>
  105.             </tr>
  106.           </tbody>
  107.         </table>
  108.       </div>
  109.     </div>
  110.   </template>
  111.  
  112.   <script>
  113.     window.onload = function (ev) {
  114.       // 定义评论组件
  115.       var temp_comment = {
  116.         template: '#tp_comment',
  117.         // 组件里的数据必须是方法返回。
  118.         data: function () {
  119.           return {
  120.             input_comment: '',// 输入的评论
  121.             total: 200,// 评论可输入总字数
  122.           }
  123.         },
  124.         // 父组件传递的消息列表
  125.         props: ['comment_item', 'id'],
  126.         // 计算属性
  127.         computed: { // 计算剩余可输入字数
  128.           surplus: function () {
  129.             return this.total - this.input_comment.length;
  130.           },
  131.         },
  132.         // 自定义过滤器
  133.         filters: {
  134.           // 时间过滤器
  135.           "date": function (d) {
  136.             var newdate = new Date(d);
  137.             y = newdate.getFullYear();
  138.             m = (newdate.getMonth() + 1).toString().padStart(2, '0');
  139.             d = newdate.getDay().toString().padStart(2, '0');
  140.             hh = newdate.getHours().toString().padStart(2, '0');
  141.             mm = newdate.getMinutes().toString().padStart(2, '0');
  142.             ss = newdate.getSeconds().toString().padStart(2, '0');
  143.             return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
  144.           }
  145.         },
  146.         // 方法
  147.         methods: {
  148.           // 父组件传入的发表评论方法，由子组件调用父组件发表评论方法
  149.           btnsend: function () {
  150.             // 调用父组件方法。
  151.             this.$emit('prentsendcomment', this.id, this.input_comment)
  152.           },
  153.           // 评论点赞
  154.           btnsupport: function (id) {
  155.             // 调用父组件方法。
  156.             this.$emit('prentsendsupport', id)
  157.           },
  158.           // 评论反对
  159.           btnopposition: function (id) {
  160.             // 调用父组件方法。
  161.             this.$emit('prentsendopposition', id)
  162.           }
  163.         }
  164.       }
  165.  
  166.       var vm = new Vue({
  167.         el: '#app',
  168.         data: {
  169.           id: 12,
  170.           // 测试数据
  171.           comment_data: [
  172.             {
  173.               Id: 1,
  174.               PortraitUrl: "../images/user2-160x160.jpg",
  175.               NickName: '那年初夏',
  176.               CommentContent: '劝君更敬一杯酒',
  177.               SupportNum: 14,
  178.               OppositionNum: 323,
  179.               CreateTime: new Date()
  180.             },
  181.             {
  182.               Id: 2,
  183.               PortraitUrl: "../images/user2-160x160.jpg",
  184.               NickName: '列夫托尔斯泰',
  185.               CommentContent: '这个部电影指的我们去好好看看。',
  186.               SupportNum: 2312,
  187.               OppositionNum: 33,
  188.               CreateTime: new Date()
  189.             },
  190.             {
  191.               Id: 3,
  192.               PortraitUrl: "../images/user2-160x160.jpg",
  193.               NickName: '小怪兽',
  194.               CommentContent: '千万不要下载，千万不要下载，千万不要下载，我活了34年，这种烂片，第一次见难道比纯洁心灵还要烂》？',
  195.               SupportNum: 23,
  196.               OppositionNum: 43,
  197.               CreateTime: new Date()
  198.             },
  199.             {
  200.               Id: 4,
  201.               PortraitUrl: "../images/user2-160x160.jpg",
  202.               NickName: '帅大叔',
  203.               CommentContent: '到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”',
  204.               SupportNum: 56,
  205.               OppositionNum: 55,
  206.               CreateTime: new Date()
  207.             },
  208.             {
  209.               Id: 5,
  210.               PortraitUrl: "../images/user2-160x160.jpg",
  211.               NickName: '夏末',
  212.               CommentContent: '版权归作者所有，任何形式转载请联系作者。作者：电影幕后故事（来自豆瓣）来源：https://movie.douban.com/review/9666136/郭敬明当作家远不如当商人成功。当作家写出来的那些不知所云、虚到不行的句子只能骗一骗心智不成熟的小孩子；但做商人时所展现出来的精明与虚伪倒是能骗过不少人。我指的就这部披着“反校园霸凌”外衣，实则还是矫情、无病呻吟的电影。',
  213.               SupportNum: 78,
  214.               OppositionNum: 23,
  215.               CreateTime: new Date()
  216.             },
  217.             {
  218.               Id: 6,
  219.               PortraitUrl: "../images/user2-160x160.jpg",
  220.               NickName: '罗罔极',
  221.               CommentContent: '前阵子，我犯了个错。 我在文章里说，当下的大陆喜剧，有两大派系分庭抗礼。 一派是徐峥宁浩，其作品核心偏于人间悲剧； 一派是开心麻花，其作品核心偏于纯粹喜剧。 没想到，现在又杀出个程咬金。 八年酝酿，慢工打磨。 导演、编剧：黄渤。 这一出手，就震惊四座—— 《一出好... ',
  222.               SupportNum: 332,
  223.               OppositionNum: 33,
  224.               CreateTime: new Date()
  225.             },
  226.           ]
  227.         },
  228.         // 注册组件
  229.         components: {
  230.           'temp_comment': temp_comment,
  231.         },
  232.         // 方法
  233.         methods: {
  234.           getdata: function () {
  235.             var list = JSON.parse(localStorage.getItem('cmts') || '[]')
  236.             this.list = list;
  237.           },
  238.           // 由子组件调用后传入评论资源的id和内容
  239.           sendcomment: function (id, content) {
  240.             alert(id + '------' + content)
  241.           },
  242.           // 子组件触发点赞
  243.           sendsupport: function (id) {
  244.             alert(id)
  245.           },
  246.           // 子组件触发反对
  247.           sendopposition: function (id) {
  248.             alert(id)
  249.           }
  250.         },
  251.  
  252.         beforeCreate() {
  253.           // 这时候data 和methods 都还没有被初始化，所以访问不到getdata
  254.         },
  255.         created() {
  256.           this.getdata();
  257.         }
  258.       })
  259.  
  260.     };
  261.   </script>
  262. </body>
  263.  
  264. </html>

Vue评论组件案例的更多相关文章

  1. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

  2. 前端笔记之Vue（二）组件&案例&props&计算属性

    一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...

  3. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  4. vue路由异步组件案例

    最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...

  5. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  6. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. react-react中的css+评论组件

    一个小案例,巩固有状态组件和无状态组件的使用 通过for循环生成多个组件 数据: CommentList = [ { user: '张三', content: '哈哈,沙发' }, { user: ' ...

  8. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  9. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

随机推荐

  1. MongoDB之DBref(关联插入,查询,删除) 实例深入

    http://blog.csdn.net/crazyjixiang/article/details/6668288 suppose I have the following datastructure ...

  2. vue.js小总结

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...

  3. css3 绘制图形

    星形: .star-six { width:; height:; border-left: 50px solid transparent; border-right: 50px solid trans ...

  4. Selenium库，Python精品教程！

    什么是Selenium selenium基本使用 用python写爬虫的时候,主要用的是selenium的Webdriver,我们可以通过下面的方式先看看Selenium.Webdriver支持哪些浏 ...

  5. Prometheus运⾏框架介绍

    框架结构的展⽰图 • 我们先来看下这个部分 这⾥是 prometheus的服务端也就是核⼼ prometheus本⾝是⼀个以进程⽅式启动,之后以多进程和多线程实现监控数据收集 计算 查询 更新 存储 ...

  6. java集合之ArrayList,TreeSet和HashMap分析

    java集合是一个重点和难点,如果我们刻意记住所有的用法与区别则是不太现实的,之前一直在使用相关的集合类,但是没有仔细研究区别,现在来把平时使用比较频繁的一些集合做一下分析和总结,目的就是以后在需要使 ...

  7. fasthttp 的 goroutine pool 实现探究

    引言 fasthttp是一个非常优秀的web server框架,号称比官方的net/http快10倍以上.fasthttp用了很多黑魔法.俗话说,源码面前,了无秘密,我们今天通过源码来看一看她的gor ...

  8. C++类中静态变量和普通变量的区别

    静态变量: 1.静态变量会被编到程序的exe里面,从程序启动到结束,它一直存在: 2.静态变量的初始化值为0: 3.全局变量默认是静态变量: 4.在类中的函数变量前面加了static的也是静态变量,只 ...

  9. Python数据结构应用2——Queue

    Reference: Problem Solving with Algorithms and Data Structures, Release 3.0 队列 Queue 建立 class Queue: ...

  10. Windows上安装配置SSH教程（1）——知识点汇总

    1.是什么SSH? 维基百科:https://zh.wikipedia.org/wiki/Secure_Shell 其他博客:http://www.ruanyifeng.com/blog/2011/1 ...