本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。 先上在线demo：nofollow" href="http://jsbin.com/ceqifo/1/edit?js,output">http://jsbin.com/ceqifo/1/edit?js,output
再上效果图
可直接评论，点击别人的评论能回复别人的评论。
html
数据全都由根组件绑定下去的。这里还监听了几个事件。
文章内容的组件，没啥好讲的，直接把数据绑定进去子组件就行了。这里我是直接绑定一个obj而不是把标题、时间等等详细的信息分别绑定进去。因为直接绑定一个对象，子组件可以用.的方式很好的调用，比分开写好多了。
然后先说个简单点的，，文本框的那个组件。
type是如果点击了别人的评论，会显示 ”你回复xxx “ 的提示框，这个因为跨了组件通信而且两组件不是父子组件但是是兄弟组件，我把他们的通信挂在了父组件的一个属性上，实现通信。
文本框内的内容用一个v-model双向绑定，如果点击了确定，就触发一个 addComment事件并把文本内容传给父组件，父组件会监听事件。
先来确定json格式
再来看commemt-content组件
评论，我来发表第一篇评论！
\
\ @H_301_16@\ @H_301_16@\ @H_301_16@\ @H_301_16@\ @H_301_16@',props: ['comment'],methods: { changeCommenter: function(name,index) { this.$emit("change",name,index); } } }); @H_301_16@
如果没有内容，则显示 “暂无评论，我来发表第一篇评论！”。如果有内容就开始遍历。因为点击评论要知道第几条，所以每条评论要绑一个v-bind:index="index"
到了二次评论那块，还是遍历reply数组，绑定该绑定的。因为就算点击内容，也是加到那条一级评论的最下面，所以两个点击事件我都是绑定了同一个事件。只是传进去的名字不一样而已，后面那个index都是一级评论的index。
changeCommenter事件触发了change，父组件监听，执行相应行为。
data那里。。。实在是取名困难症啊。。。commenter是当前登录名，这里到时候会session里拿；type就是看到底是评论作者的还是评论别人的评论的；oldComment就是就评论者的名字（实际储存的时候应该是id）；chosedIndex是被点击的评论的index。
canelCommit是监听到取消评论事件，这里是为了如果了点击了别人的评论但是突然我就是想变评论作者用的。所以设type=0；
changCommmer是监听到点击了别人评论想回复评论的。即type=1.
addComment就是监听添加评论事件的。根据type的值，push相应的数组。这里还要记得跟数据库那个对接。传数据有两种方法，这里是根据type的不同分两个url传还是一个，取决于表的设计。待我明天好好设计表后，加入http请求，完成这个评论功能。
要期末了。真的怕挂科。
然而当我思考了下后。如果单单用散列的话，就不能根据时间来排序了。因为散列是根据id%length的值来插入的，所以没了时间排序。如果直接根据查数据库返回的数组组合这个obj的话，肯定是早插入的id靠前所以有时间顺序。这个数据结构的问题还真不简单啊。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
