Vue.js利用数据变化异步加载数据

 

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>