我用Vue.js实现微信朋友圈的一些功能，实现展示朋友圈，评论，点赞。

先构造一个某视频剪辑软件的实例，对会更改的数据进行双向绑定，

我用JSON伪造模版数据，先实现显示朋友圈的效果，使用v-for方法去循环所有提要中的每一项项目生成包括名称、内容、时间在内的各项数据。

微信朋友圈实现效果

超文本标记语言代码：

div class=' border ' v-for='所有提要中的项目' track-by=' $ index ' div class=' user-pic ' img v-bind :s RC=' http : item。URL ' alt=' '/div class='用户-内容' H2类='间距{item.name}}/h2 p class='间距{item.content}}/p img class='间距v-bind :s RC=' http :项。picurl ' alt=' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' span class=' icon-heart-empty '/span { { item。like } }/a v-: click=' comtClick($ event，item)' href=' JavaScript :'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' BTN BTN-注释' span class=' icon-comment-alt '/span评论/a /div实现朋友圈点赞

当喜欢的值变为赞时，向类似用户的中推一个点赞的用户名，然后将喜欢的值变为取消。当用户点击取消按钮的时候，将类似用户的数组中添加的赞流行音乐掉。

如点击：函数（事件，提要){事件。stopperpagation()；if (feed.like==='赞){ if(gUserInfo){ feed。用户喜欢。推(gUserInfo。用户名)；feed.like='取消；} } else { if(gUserInfo){ feed。用户喜欢。pop()；feed.like='赞；} } }实现评论功能

投入的val()推送到内容的值里。

输入时钟：函数（事件){事件。stopperpagation()；var comText=$(' .插入输入')。val()；这个。单击提要。评论。push({ ' name ' : guserinfo。username，' content ' : ComText })；$('.插图')。addClass(')隐藏');$('.过分渲染")。addClass(')隐藏');$('.插入输入')。val(" ")；}实现评论回复功能

给评论中添加回答的钥匙。由于微信的回复是平铺的所以只要显示谁对谁的回复即可，不需要进行评论的嵌套。所以超文本标记语言中使用垂直中频对评论中是否存在回答进行判断。

回复周期k :函数(事件){ event。stopperpagation()；var replyText=$(' .复制器盒输入')。val()；这个。单击提要。评论。push({ ' name ' : guserinfo。用户名，“内容”:replyText，“回复”: this。回复用户})；$('.replybox ').addClass(')隐藏');$('.过分渲染")。addClass(')隐藏');$('.复制器盒输入')。val(" ")；}对评论中是否存在回答进行判断

div v-if='！(一个命令。reply)' a href=' JavaScript :'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' v-: click=' reply copt($ event，item，onecommet)' class=' reply ' span class=' user ' { onecommet。name } } :/span { { onecommet。content } }/a/div div v-else a href=' JavaScript 3:'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' v-: click=' reply copt($ event，item，onecommet)' class=' reply ' span class=' user '(用户信息。用户名} }/span回复span class=' user ' { replyUser } } : a href=' JavaScript :'rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' rel=' external no follow ' class=' reply ' { onecommet。内容} }/a/span/a/div遇到的坑：

异步加载JSON时，不能直接得到JSON的值，因为加载以下函数后，可能得不到JSON的值。因此，数据将是未定义的。所以需要调用JSON回调函数中的函数。

在初始化showComt时，需要使用ready，然后在加载DOM后执行。

收获：

学习了v-for、v-if、v-show、on:click等vue的使用方法，vue的构造函数，以及jQuery的Ajax相关方法。

Github链接

项目下载地址：Webchat-friendfeed_jb51.rar

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。