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 Ajax文件上传(php)
Jun 16 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
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
PHP如何抛出异常处理错误
2011/03/02 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
python调用百度语音识别api
2018/08/30 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
护士辞职信范文
2014/01/19 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
离婚起诉状范本
2015/05/19 职场文书
办公室日常管理制度
2015/08/04 职场文书