Vue. js is used to simulate the WeChat moments development demo and vue. jsdemo.

Vue. js is used to simulate the development demo and vue. jsdemo.

I use Vue. js to implement some functions of the circle of friends, to display the circle of friends, comment, and likes.

First, construct a vue instance to bind the changed data in two directions,

I use JSON to forge template data, first display the effect of the circle of friends, and use the v-for method to cycle every item in ALLFeeds to generate various data including name, content, and time.

Circle of friends

HTML code:

<Div class = "border" v-for = "item in AllFeeds" track-by = "$ index"> <div class = "user-pic">  </div> <div class =" user-content "> 

Likes in the circle of friends

When the like value changes to like, push a like username to userLike and change the like value to canceled. When you click the cancel button, the user will pop the like added to the userLike array.
LikeClick: function (event, feed) {event. stopPropagation (); if (feed. like = "like") {if (gUserInfo) {feed. userLike. push (gUserInfo. username); feed. like = 'cancel';} else {if (gUserInfo) {feed. userLike. pop (); feed. like = 'Z ';}}}
Comments

The val () of input is pushed to the value of content.
 inputClick: function (event) {     event.stopPropagation();     var comText = $(".inset input").val();     this.clickFeed.comment.push({"name": gUserInfo.username, "content": comText});     $(".inset").addClass("hidden");     $(".overplay").addClass("hidden");     $('.inset input').val('');    }
Implement the comment reply function

Add the reply key to the comment. Because the reply is tiled, you only need to display the reply to whom and do not need to nest the comment. Therefore, use v-if in HTML to determine whether reply exists in comment.
 replyClick:function(event){     event.stopPropagation();     var replyText = $(".replybox input").val();     this.clickFeed.comment.push({      "name":gUserInfo.username,      "content":replyText,      "reply":this.replyUser     });     $(".replybox").addClass("hidden");     $(".overplay").addClass("hidden");     $(".replybox input").val('');    }
Determine whether reply exists in comment
<Div v-if = "! (Onecommet. reply) "> <a href =" javascript :; "rel =" external nofollow "=" external nofollow "v-on: click = "replyComt ($ event, item, onecommet)" class = "reply"> <span class = "user" >{{ onecommet. name }}: </span >{{ onecommet. content }}</a> </div> <div v-else> <a href = "javascript :; "rel =" external nofollow "=" external nofollow "v-on: click = "replyComt ($ event, item, onecommet)" class = "reply"> <span class = "user" >{{ userinfo. username }}</span> reply <span class = "user" >{{ replyUser }}: <a href = "javascript :; "rel =" external nofollow "> {onecommet. content }}</a> </span> </a> </div>
Pitfalls:

When loading JSON asynchronously, you cannot directly obtain the JSON value, because the JSON value may not be obtained after the following function is loaded. Therefore, data is undefined. Therefore, you need to call the function in the JSON callback function.

When initializing showComt, ready is required. After the DOM is loaded, it is executed.

Gains:

I learned how to use vue methods such as v-for, v-if, v-show, v-on: click, vue constructor, and jQuery Ajax-related methods.
Github Link

Project: Webchat-friendfeed_jb51.rar
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.