jquery vue 替代_拥抱Vue，抛弃jQuery

做阶梯价销售提报系统着实被自己的代码恶心了一把，jQuery这个曾经无比优秀的框架对于日益变化的需求也显得有点力不从心。抽空研究了一下vue，觉得不能比jQuery好更多，相见恨晚，含泪推荐~~

下面看两个页面，一个是jQuery实现版本，另一个是vue实现版本。后端接口一模一样。

jQuery版

毛利活动列表

body{margin: 10px;}

活动ID活动名称行业本月准入交易额交易额增幅指标佣金收入增幅指标生效日期

未选择任何活动

确定

var form;

var laypage;

function queryEvents(page) {

$.ajax({

type: "GET",

url: "/discount/submit/queryEvents",

dataType: "json",

data: {

page: page

},

success: function(data) {

$("#eventListTable tbody").empty();

var page = data.page;

var pageSize = data.pageSize;

var recordCount = data.recordCount;

var pageCount = data.pageCount;

laypage({

cont: 'pageBar' //分页容器的id

,pages: pageCount //总页数

,skin: '#FF5722' //自定义选中色值

,curr: page

//,skip: true //开启跳页

,jump: function(obj, first){

if(!first){

//layer.msg('第'+ obj.curr +'页');

queryEvents(obj.curr);

}

}

});

$("#pageBar").find("div").append("" + "共" + recordCount + "条记录" + "");

var eventList = data.records;

if (eventList == null || eventList.length == 0) {

//无数据

var tr = $("

");

tr.append("

未查询到数据");

$("#EventListTable tbody").append(tr);

return;

}

//var eventList = data.eventList;

var selectedEventId = $("#selectedQuote").attr("selectedEventId");

var poiIdListStr = "";

for (var i = 0; i < eventList.length; i++) {

var tr = $("

");

var eventEndTime = new Date(eventList[i].eventEndTime);

var timeout = (new Date()) > eventEndTime;//是否过期

if (timeout) {

tr.append("

过期");

//tr.append("

ဇ");

} else {

if (eventList[i].id == selectedEventId) {

tr.append("

");

} else {

tr.append("

");

}

}

tr.append("

" + eventList[i].id + "");

tr.append("

" + eventList[i].eventName + "");

var pOISecondCategoryTd = $("

");

var accessAmountTd = $("

");

var amountRiseIndexTd = $("

");

var commissionRiseIndexTd = $("

");

var eventConfigDTOList = eventList[i].eventConfigDTOList;

if (eventConfigDTOList != null) {

for (va