vue.js api地址:http://cn.vuejs.org/
以下代码之前为同步加载数据,可能会导致页面整体变慢,采用异步加载方式实现
主要利用vue的数据的变化,达到异步加载的效果,动态的添加数据,vue更新数据,达到异步请求加载数据目的,充分理解vue.js加载数据。
JS以及页面部分代码片段 //命名数据 var sourceOfTruth = {}; sourceOfTruth.items = {}; sourceOfTruth.data = {}; //初始化sourceOfTruth数据方法 initPackageInfo:function(sessionKey,page){ var data = { "token":sessionKey, "pageNum":page, "pageSize":pageSize }; $.ajax({ url:urlConfig.teacherUrl+"/xxx.do", dataType:'JSON', type:'GET', data:data }).done(function(cfg){ if(cfg.stateCode==4002){ window.location.href=urlConfig.masterUrl+"login/index.html?goBack="+window.location.href; }else if(cfg.stateCode==3000){ $("#tj-course-package").show(); if(cfg.data==null || cfg.data=='null'){ $("#tj-kcb-nodata1").show(); sourceOfTruth.items=null; }else{ var t1=cfg.data.result; /** * 去除同步加载数据 * */ sourceOfTruth.items = t1; $("#jpage").empty(); if(cfg.data.totalCount<=pageSize)return; var total = Math.ceil(cfg.data.totalCount/pageSize); pageNav( $("#jpage"), //点击页码时的回调 function(c, t) { P.initPackageInfo(qjsessionKey,c); $("html,body").animate({scrollTop:$("#tj-course-package").offset().top},1); } ).go(page, total); } } }) }, //vue 中初始化div id=tj-course-package 相当于与id=tj-course-package的域初始化 setCoursePackageList:function(){ var vm4 = new Vue({ el:'#tj-course-package', data:sourceOfTruth, // 在 `methods` 对象中定义方法 methods:{ //展开与扩展的onclick点击方法 closeMessage:function(index,idname,event){ var id=sourceOfTruth.items[index].id; var obj =$("#"+idname+index); if($(obj).hasClass("cur")){ event.cancelBubble = true; $(obj).removeClass("cur"); $("#mesageTip_"+index).html("展开"); }else{ //加载数据 P.initVideosInfo(id); sourceOfTruth.data=coursePackage; $(obj).addClass("class","cur"); $("#mesageTip_"+index).html("收起"); } } }, ready:function(){ } }); } //页面片段 中 closeMessage 为点击事件,负责异步加载数据 <div class="s-tjpkcb" id="tj-course-package" style="display:none;"> <h3>精品课程<span>(收益)</span></h3> <div class="s-tjpkcb-box"> <div v-for="item in items"> <!-- 点击推荐一行,对应的s-tjpkcb-con添加类名 cur,课程展开, --> <div class="{{packageId==item.id?'s-tjpkcb-con cur':'s-tjpkcb-con'}}" id="s-tjpkcb-con_{{$index}}" v-on:click="tj_pkcb($index,'s-tjpkcb-con_')"> <div class="s-tjpkcbcon-tit cfix"> <a href="javascript:;"> <p title="{{item.name}}">{{item.name}}</p> </a> <input type="button" value="推荐课程" v-on:click="tj_pkcb_info($index)"/> <a class="s-tjpkcbcon-zk" href="javascript:;" v-on:click="closeMessage($index,'s-tjpkcb-con_',$event)"><span class="open_close" id="mesageTip_{{$index}}">{{packageId==item.id?'收起':'展开'}}</span><em></em></a> <div class="s-tjpkcbcon-titjs">{{item.description}}</div> </div> <div class="s-tjpkcbcon-bot"> <ul class="s-tggksp-list cfix"> //异步加载数据data <li v-for="item1 in data"> <p class="s-tggksplist-img"> <a class="" v-on:click="auth_status(item1.id,item.id)" href="javascript:;"> <img v-bind:src="item1.videoPic==null?'http://www.xxx.com/source/specialImg/2016/01/1453202377242912614.png':'http://www.daydays.com'+item1.videoPic" alt=""> </a> <em v-on:click="auth_status(item1.id,item.id)"></em> </p> <p class="s-tggksplist-name" title="{{item1.title}}"> <a v-on:click="auth_status(item1.id,item.id)" href="javascript:;"> {{item1.title}} </a> </p> <a class="s-link" v-on:click="auth_status(item1.id,item.id)" title="{{item1.title}}" href="javascript:;"></a> </li> </ul> </div> </div> </div>