Vue data数据更新或覆盖 并立即渲染页面

官方文档有更详细的解释以及代码：  https://cn.vuejs.org/v2/guide/list.html

声明：

      仅此记录实践当中出现的问题及解决办法，有许多错误，望能得到大家的指正！！！ 不胜感激 。 如果有遇到跟我相同的问题可以留言，我会及时回复，虽然我也很菜！！！   

Vue部分代码：list为渲染到页面的数据

var menuList =	new Vue({
	el: '#zhongxingss',
	data:{
		 list:[],
		 page:1,
		 rows:10,
		 type:100,
		 total:0
	},
created:function(){
	var _this=this;
	$.ajax({
		url : projectName + '/user/getFoolMenuLibraryList?page=' + page
				+ '&rows=' + rows+ '&type=' + type,
		type : 'GET',
		success : function(d) {
			_this.page = page;
			_this.rows = $("#changeCount").val();
			_this.type = type;
			_this.list = d.list;
			build_page_nav(d);
		},
		error : function() {
			console.log("服务异常" + 222)
			window.location.reload();
		}
	})
	
},
methods:{
	editmenu:function(id){
		 top.jzts();
		 var diag = new top.Dialog();
		 diag.Drag=true;
		 diag.Title ="菜品详情";
		 diag.URL = projectName+'/user/foolMenuEdit?foolMenuID='+id;
		 diag.Width = 469;
		 diag.Height = 510;
		 diag.CancelEvent = function(){ //关闭事件
			 window.location.reload();
			diag.close();
		 };
		 diag.show();
	},
	delmenu:function(id){
		 bootbox.confirm("确定要删除此菜品吗?", function(result){
				 if(result) {
					var url = projectName+"/user/DeletefoolMenuLibrary?id="+id;
					$.ajax({
						url:url,
						data:id,
						type:"get",
						success:function(data){
							//成功，刷新当前页面
							window.location.reload();
						},
						error:function(){
							alert("服务器异常，请稍后再试");
							window.location.reload();
						}
					});
				} 
			}); 		
	},
	chooseAll:function(){
		if($("#zcheckbox").is(":checked")){
			 $("input[name='ids']:checkbox").each(function(){ 
	              $(this).prop("checked", true);  
	        });
		}else{
			$("input[name='ids']:checkbox").each(function() {   
	              $(this).prop("checked", false);  
	        });
		}
	},
	//跳转页面
	gotoPage:function(){gotoPage()}

} 

})

Html代码：

	
                               
	{{ser.id }}
    {{ser.foolTitle }} 
	{{ser.foolMakeTime }}分钟
	{{ser.foolPrice }}元
	{{ser.foolShopId == null?"公共菜品":"私有菜品 id="+ser.foolShopId}}  
	{{ser.foolAddUserId }}
	
  
         

    

		

			


 	


  

        
          
    
  
    

      
    
        
       
     
    
   
 

html代码格式有点乱！！！  排这个版我心都累了，将就吧！！！

下面是通用的ajax请求数据，后台返回数据并赋值给list  然后进行渲染

   menuList.rows=rows;   最重要的一点

function gotoByAjax(pageNum, rows, type) {
	$.ajax({
		url : projectName + '/user/getFoolMenuLibraryList?page=' + pageNum+'&rows=' + rows+ '&type=' + type,
		type : 'GET',
		success : function(d) {
			menuList.list = d.list;
			pageInfo = d;
			total = d.total;
			rows = $("#changeCount").val();
			menuList.rows=rows; //前面我定义了menuList所以直接menuList.rows即可获取，
                        //若没有进行定义Vue变量，可以利用Vue.set(target,key，value); target：要更改的数据源(可以是对象或者数组)  key：要更改的具体数据(可以是字符串和数字) value ：重新赋的值，当然还有其他赋值的方法
			list = d.list;
			build_page_nav(d);
		},
		error : function() {
			console.log("服务异常" + 222)
		}
	})
}