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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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
PHP在Web开发领域的优势
2006/10/09 PHP
用PHP生成静态HTML速度快类库
2007/03/18 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
python中日期和时间格式化输出的方法小结
2015/03/19 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Django数据统计功能count()的使用
2020/11/30 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
会计电算化毕业生自荐信
2014/03/03 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
年终考核实施方案
2014/05/26 职场文书
给学校的建议书400字
2015/09/14 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
无线电知识基础入门篇
2022/02/18 无线电
Python使用pyecharts控件绘制图表
2022/06/05 Python