Vue评论组件案例
最近学习了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}} <i class="glyphicon glyphicon-time"></i> {{item.CreateTime|date}}
<span class="pull-right">
<a href="#" @click.prevent="btnsupport(item.Id)"> <i class=" glyphicon glyphicon-thumbs-up"></i> ({{item.SupportNum}})</a>
<a href="#" @click.prevent="btnopposition(item.Id)"><i class=" glyphicon glyphicon-thumbs-down"></i> ({{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评论组件案例的更多相关文章
- vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位 splice(0,1,内容)把索引为0 ...
- 前端笔记之Vue（二）组件&案例&props&计算属性
一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...
- Vue 根组件,局部,全局组件 | 组件间通信,案例组件化
一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...
- vue路由异步组件案例
最近研究了vue性能优化,涉及到vue异步组件.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是异步调用组件前提.异步组件在优先级上让位同步组件.下面介绍的是怎么实现异步组件. ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 从零开始学 Web 之 Vue.js（六）Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- react-react中的css+评论组件
一个小案例,巩固有状态组件和无状态组件的使用 通过for循环生成多个组件 数据: CommentList = [ { user: '张三', content: '哈哈,沙发' }, { user: ' ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...
随机推荐
- web页面测试
一.Web的功能测试 1.超链接测试 a.链接与链接的说明文字要匹配 (注:也可以是图片) b.链接的文字要描述正确 c.链接的文字要精简有效 d.链接 ...
- SpringBoot 同时整合thymeleaf html、vue html和jsp
问题描述 SpringBoot如何同时访问html和jsp SpringBoot访问html页面可以,访问jsp页面报错 SpringBoot如何同时整合thymeleaf html.vue html ...
- lsb_release -a 查询Linux系统版本
LSB是Linux Standard Base的缩写,lsb_release命令用来显示LSB和特定版本的相关信息.如果使用该命令时不带参数,则默认加上-v参数.-v, --version显示版本信息 ...
- JSON 的小技巧
有的时候上游传过来的字段是string类型的,但是我们却想用变成数字来使用. 本来用一个json:",string" 就可以支持了,如果不知道golang的这些小技巧,就要大费周章 ...
- 「WC 2018」州区划分
题目大意: 给一个无向图$G(V,E)$满足$|V|<=21$,对于某一种将$G(V,E)$划分为k个的有序集合方案,若每一个子集$G_i(V_i,E_i)$,$E_i=\{(x,y)|x\in ...
- B20J_2733_[HNOI2012]永无乡_权值线段树合并
B20J_2733_[HNOI2012]永无乡_权值线段树合并 Description:n座岛,编号从1到n,每座岛都有自己的独一无二的重要度,按照重要度可以将这n座岛排名,名次用1到 n来表示.某些 ...
- 【爆料】-《西澳大学毕业证书》UWA一模一样原件
☞西澳大学毕业证书[微/Q:2544033233◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&a ...
- 基于SpringBoot从零构建博客网站 - 确定需求和表结构
要确定一个系统的需求,首先需要明确该系统的用户有哪些,然后针对每一类用户,确定其需求.对于博客网站来说,用户有3大类,分别是: 作者,也即是注册用户 游客,也即非注册用户 管理员,网站维护人员 那么从 ...
- 虚拟机设置静态IP配置
网关 虚拟机的ip设置 vi /etc/sysconfig/network-scripts/ifcfg-eth0 重启网卡 service network restart 测试 ping www.b ...
- Mybatis之旅第六篇-关联查询
一.引言 通过动态SQL我们可以进行复杂SQL的编写,但之前的例子都是单表查询,在实际开发中,当然不可能都是单表,很多时候我们需要进行关联多表查询(有些公司为了性能还是尽量的使用单表查询),表与表之间 ...