Vue.js实现文章评论和回复评论功能
作者：傲娇的黄同学
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了Vue.js实现文章评论和回复评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。
先上在线demo：
再上效果图
可直接评论，点击别人的评论能回复别人的评论。
&div id="comment"&
&article-content v-bind:article="article"&&/article-content&
&commemt-content v-bind:comment="comment" v-on:change="changCommmer"&&/commemt-content&
&comment-textarea v-bind:type="type" v-bind:name="oldComment" v-on:submit="addComment" v-on:canel="canelCommit"&&/comment-textarea&
数据全都由根组件绑定下去的。这里还监听了几个事件。
&article-content是文章内容的组件，没啥好讲的，直接把数据绑定进去子组件就行了。这里我是直接绑定一个obj而不是把标题、时间等等详细的信息分别绑定进去。因为直接绑定一个对象，子组件可以用.的方式很好的调用，比分开写好多了。
&article-content组件–文本
然后先说个简单点的，&comment-textarea&，文本框的那个组件。
ponent('commentTextarea',{
template:'\
&div class="commentBox"&\
&h3&发表评论&/h3&\
&b v-if="type"&你回复&{{name}}&/b&\
&textarea name="" value="请填写评论内容" v-model="commentText"&&/textarea&\
&button class="btn" @click="addComment"&发表&/button&\
&button class="btn" @click="canelComment"&取消&/button&\
props: ['type','name'],
data: function(){
return {commentText:""}
methods: {
addComment: function() {
this.$emit("submit",mentText);
mentText = "";
canelComment: function() {
this.$emit("canel");
mentText = "";
type是如果点击了别人的评论，会显示 ”你回复xxx “ 的提示框，这个因为跨了组件通信而且两组件不是父子组件但是是兄弟组件，我把他们的通信挂在了父组件的一个属性上，实现通信。
文本框内的内容用一个v-model双向绑定，如果点击了确定，就触发一个 addComment事件并把文本内容传给父组件，父组件会监听事件。
commemt-content组件–评论内容
先来确定json格式
comment: [
name: "有毒的黄同学", //评论人名字
content: "好,讲得非常好，good",
//回复评论的信息，是一个数组，如果没内容就是一个空数组
responder: "傲娇的", //评论者
reviewers: "有毒的黄同学",
//被评论者
content: "你说得对"
再来看commemt-content组件
ponent('commemt-content',{
template:'\
&div class="commentBox"&\
&h3&评论&/h3&\
&p v-if="comment.length==0"&暂无评论，我来发表第一篇评论！&/p&\
&div v-else&\
&div class="comment" v-for="(item,index) in comment" v-bind:index="index" &\
&b&{{item.name}}&span&{{item.time}}&/span&&/b&\
&p @click="changeCommenter(item.name,index)"&{{item.content}}&/p&\
&div v-if="item.reply.length & 0"&\
&div class="reply" v-for="reply in item.reply"&\
&b&{{reply.responder}}&&回复&&{{reply.reviewers}}&span&{{reply.time}}&/span&&/b&\
&p @click="changeCommenter(reply.responder,index)""&{{reply.content}}&/p&\
props: ['comment'],
methods: {
changeCommenter: function(name,index) {
this.$emit("change",name,index);
如果没有内容，则显示 “暂无评论，我来发表第一篇评论！”。如果有内容就开始遍历。因为点击评论要知道第几条，所以每条评论要绑一个v-bind:index="index"
到了二次评论那块，还是遍历reply数组，绑定该绑定的。因为就算点击内容，也是加到那条一级评论的最下面，所以两个点击事件我都是绑定了同一个事件。只是传进去的名字不一样而已，后面那个index都是一级评论的index。
changeCommenter事件触发了change，父组件监听，执行相应行为。
var comment = new Vue({
el: "#comment",
commenter: "session", //评论人，这里会从session拿
//0为评论作者1为评论别人的评论
oldComment: null, //久评论者的名字
chosedIndex: -1, //被选中的评论的index
article: {
title: "当归泡水喝的九大功效",
content: ""
comment: [] //评论内容
methods: {
//添加评论
addComment: function(data) {
if(this.type == 0) {
ment.push({
name: 'session',
time: getTime(),
content: data,
//服务器端
}else if(this.type == 1){
ment[this.chosedIndex].reply.push({
responder: 'session',
ment[this.chosedIndex].name,
time: getTime(),
content: data
this.type = 0;
//监听到了点击了别人的评论
changCommmer: function(name,index) {
this.oldComment =
this.chosedIndex =
this.type = 1;
//监听到了取消评论
canelCommit: function() {
this.type = 0;
data那里。。。实在是取名困难症啊。。。commenter是当前登录名，这里到时候会session里拿；type就是看到底是评论作者的还是评论别人的评论的；oldComment就是就评论者的名字（实际储存的时候应该是id）；chosedIndex是被点击的评论的index。
canelCommit是监听到取消评论事件，这里是为了如果了点击了别人的评论但是突然我就是想变评论作者用的。所以设type=0；
changCommmer是监听到点击了别人评论想回复评论的。即type=1.
addComment就是监听添加评论事件的。根据type的值，push相应的数组。这里还要记得跟数据库那个对接。传数据有两种方法，这里是根据type的不同分两个url传还是一个，取决于表的设计。待我明天好好设计表后，加入http请求，完成这个评论功能。
要期末了。真的怕挂科。
补充一下：
由于第一次自己设计数据库的表结构，所以很有问题。
更新一下，正确的表结构应该是每条评论都有自己的id，有一个parentId属性默认为null，如果是直接评论的话，parentId值为null，如果是回复别人的评论的话，parentId是那条评论的id。最后查出一条条数据后，再根据里面的是否有parentId等再组件这个obj，传到前端。如果直接组这个obj的话会for循环3次，所以。。。打算用一用数据结构里的散列，不用for循环这么多次。这周末搞定这个，下篇文章就是它了。
然而当我思考了下后。如果单单用散列的话，就不能根据时间来排序了。因为散列是根据id%length的值来插入的，所以没了时间排序。如果直接根据查数据库返回的数组组合这个obj的话，肯定是早插入的id靠前所以有时间顺序。这个数据结构的问题还真不简单啊。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Vue.js简介
Vue.js的作者为Evan You（尤雨溪），任职于Google Creative Lab，虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的AngularJs，下面我会将Vue与Angular（Angular 1.0+版本）做一些简单的比较。
Vue的主要特点就和它官网（）所介绍的那样：
（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化
下面看一段Angular的实现双向绑定的代码
&body ng-app="myApp"&
&div ng-controller="myCtrl"&
&p&{{ note }}&/p&
&input type="text" ng-model="note"&
var myModule = angular.module('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
$scope.note = '';
然后再看一下Vue的代码
&div id="app"&
&p&{{ note }}&/p&
&input type="text" v-model="note"&
var vm = new Vue({
el: '#app',
相比较而言我个人认为Vue的代码编写风格更加简洁，并且通俗易懂。
Vue虽然是一个比较轻量级的框架，简单轻量的同时还非常的人性化，其提供的API也是非常的容易理解，同时也提供了一些很便捷的指令和属性。
（1）绑定click事件
&a v-on:click="doSomething"&&/a&
可以简写为：
&a @click="doSomething"&&/a&
(2) 绑定动态属性
&a v-bind:href="url"&&/a&
可以简写为：
&a :href="url"&&/a&
(3) 便捷的修饰符
&!-- 阻止单击事件冒泡 --&
&a @click.stop="doSomething"&&/a&
&!-- 只在按下回车键的时候触发事件 --&
&input @keyup.enter="submit"&
(4) 实用的参数特性
&!-- debounce 设置一个最小的延时 --&
&input v-model="note" debounce="500"&
&!-- 在 "change" 而不是 "input" 事件中更新数据 --&
&input v-model="msg" lazy&
怎么样，是不是感觉优雅极了。
说起小巧，那应该首先要关注下Vue的源码大小，Vue的成产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb，相比Angular的144kb缩小了一半。
小巧的一种好处就是可以让用户更自由的选择相应的解决方案，在配合其他库方面它给了用户更大的空间。
如Vue的核心默认是不包含路由和 Ajax 功能，但是如果项目中需要路由和AJAX，可以直接使用Vue提供的官方库Vue-router及第三方插件vue-resource，同时你也可以使用其他你想要使用的库或插件，如jQuery的AJAX等。
是不是感觉非常的灵活。
Vue虽然小巧，但是&麻雀虽小五脏俱全&，在构建大型应用的时候也是得心应手。
(1) 模块化
结合一些第三方模块构建工具，如CommonJS、RequireJS或者SeaJs，可以轻松实现代码的模块化。
但是在这里小编不推荐使用上述构建工具，直接使用ES6的模块化功能，再结合Webpack进行相应打包是目前最热门的方案。
不了解ES6模块功能的可以详见：在今后的文章中，我也会对其进行介绍，包括Webpack的配置。
(2) 组件化
Vue的组件化功能可谓是它的一大亮点，通过将页面上某一组件的html、CSS、js代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。
// App.vue
&template&
&div class="box" v-text="note"&&/div&
&/template&
export default {
note: '这是一个组件的html模板！'
&style scoped&
color: #000;
我们还可以在组件里写一些预处理语言：
// App.vue
&template lang='jade'&
div(class="box" v-text="text")
&/template&
export default {
note: '这是一个组件的html模板！'
&style lang="stylus"&
color: #000
当然这样写我们是需要通过webpack来进行打包的，推荐使用Webpack + vue-loader的方式，同时使用ES6语法，需要安装babel来进行转换。因为文章为浅谈Vue.js，所以这里不做深入介绍。
和Angular一样，Vue也具有它的路由功能。通过路由功能，我们可以实现各个组件的按需加载，轻松构建单页应用。下面是一个简单的路由配置文件：
// router.js
'use strict'
export default function(router) {
router.map({
component: function (resolve) {
require(['./components/Foo.vue'], resolve)
component: function (resolve) {
require(['./components/Foo.vue'], resolve)
component: function (resolve) {
require(['./components/Bar.vue'], resolve)
如需查看具体的路由配置及使用，移步官方提供的文档：
阅读(...) 评论()vue.js实战尤雨溪这本书怎么样_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
vue.js实战尤雨溪这本书怎么样
我有更好的答案
则没有必要去大费周章进行视图模型的绑定。说句题外话，因为他们的侧重点不同，VueJS侧重数据绑定和视图组件，Vue的用途在于视图和数据的绑定。如果通过JQuery直接操作DOM的话，势必会造成视图数据和模型数据的不匹配。如果使用JQuery+VueJS开发，一定要在Vue渲染完所有的HTML组件之后再通过JQuery处理，整个过程就如行云流水般自然，而使用JQuery时应避免直接操作DOM，但是应用动画是允许的Vue的官方是不建议直接操作DOM的。JQuery和VueJS合理使用并不会造成冲突，最后由JQuery进行动画处理，Vue的目的不是取代JQuery，它是为了解决前后端分离而出现的。如果没有数据变化，只是单纯的样式变化，并且还不利于SEO优化，JQuery侧重异步请求和动画效果。JQuery与VueJS相互配合可以非常高效的完成异步任务，再通过Vue将数据绑定到组件上，首先通过JQuery发出Ajax请求，接受到服务端传递的JSON数据后，这样Vue就失去它存在的意义了
【免费测试，验证码5秒必达】
主营：验证码短信、系统通知短信、营销推广短信、手机流量。
为您推荐：
其他类似问题
等待您来回答76被浏览38471分享邀请回答19348 条评论分享收藏感谢收起6514 条评论分享收藏感谢收起查看更多回答