Vue.js实现模拟微信朋友圈开发demo


Posted in Javascript onApril 20, 2017

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

先构造一个vue的实例,对会更改的数据进行双向绑定,

我用JSON伪造模版数据,先实现显示朋友圈的效果,使用v-for方法去循环ALLFeeds中的每一项item生成包括name、content、time在内的各项数据。

微信朋友圈实现效果

Vue.js实现模拟微信朋友圈开发demo

HTML代码:

<div class="border" v-for="item in AllFeeds" track-by="$index">
      <div class="user-pic">
       <img v-bind:src="item.url" alt="">
      </div>
      <div class="user-content">
       <h2 class="spacing">{{item.name}}</h2>
       <p class="spacing">{{item.content}}</p>
       <img class="spacing" v-bind:src="item.picUrl" alt="">
       <span class="spacing time">{{item.time}}</span>
       <div class="commit" v-show="item.showComt">
        <a v-on:click="likeClick($event,item)" class="btn btn-left" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
         <span class="icon-heart-empty"></span>{{item.like}}
        </a>
        <a v-on:click="comtClick($event,item)" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-comment">
         <span class="icon-comment-alt"></span>评论
        </a>
       </div>

实现朋友圈点赞

当like的值变为赞时,向userLike中push一个点赞的username,然后将like的值变为取消。当用户点击取消按钮的时候,将userLike数组中添加的赞pop掉。

likeClick: function (event, feed) {
     event.stopPropagation();
     if (feed.like === "赞") {
      if (gUserInfo) {
       feed.userLike.push(gUserInfo.username);
       feed.like = '取消';
      }
     } else {
      if (gUserInfo) {
       feed.userLike.pop();
       feed.like = '赞';
      }
     }
    }

实现评论功能

input的val()push到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('');
    }

实现评论回复功能

给comment中添加reply的key。由于微信的回复是平铺的所以只要显示谁对谁的回复即可,不需要进行评论的嵌套。所以HTML中使用v-if对comment中是否存在reply进行判断。

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('');
    }

对comment中是否存在reply进行判断 

<div v-if="!(onecommet.reply)">
             <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="replyComt($event,item,onecommet)" class="reply">
              <span class="user">{{userinfo.username}}</span>回复 <span class="user">{{replyUser}}:
              <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="reply">{{onecommet.content}}</a>
             </span>
             </a>
            </div>

遇到的坑:

当异步加载JSON的时候,不能直接获取到JSON的值,因为可能等下面函数加载完后JSON的值还未拿到。所以会出现data数据为undefined的情况。所以需要在JSON的回调函数中进行函数调用。

初始化showComt时,需要用到ready,当DOM加载完后再执行。

收获:

学会了使用v-for、v-if、v-show,v-on:click等vue的方法,vue的构造器,jQuery的Ajax相关的方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
JS中表单的使用小结
Jan 11 Javascript
javascript if条件判断方法小结
May 17 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 #Javascript
Vue如何引入远程JS文件
Apr 20 #Javascript
AngularJS改变元素显示状态
Apr 20 #Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 #Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 #Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 #Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 #Javascript
You might like
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
js控制分页打印、打印分页示例
2014/02/08 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
Python中使用item()方法遍历字典的例子
2014/08/26 Python
初学Python实用技巧两则
2014/08/29 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
YUV转为jpg图像的实现
2019/12/09 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
财务管理专业推荐信
2013/11/19 职场文书
学习心得体会
2014/01/01 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
中考标语大全
2014/06/05 职场文书
会计岗位说明书
2014/07/29 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
关于幸福的感言
2015/08/03 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
小学生节约用水倡议书
2019/08/12 职场文书