做階梯價銷售提報系統著實被自己的**噁心了一把,jquery這個曾經無比優秀的框架對於日益變化的需求也顯得有點力不從心。抽空研究了一下vue,覺得不能比jquery好更多,相見恨晚,含淚推薦~~
下面看兩個頁面,乙個是jquery實現版本,另乙個是vue實現版本。後端介面一模一樣。
jquery版
活動id
活動名稱
行業本月准入交易額
交易額增幅指標
佣金收入增幅指標
生效日期
未選擇任何活動
確定
var form;
var laypage;
function queryevents(page) ,
success: function(data)
}});
var eventlist = data.records;
if (eventlist == null || eventlist.length == 0)
//var eventlist = data.eventlist;
var selectedeventid = $("#selectedquote").attr("selectedeventid");
var poiidliststr = "";
for (var i = 0; i < eventlist.length; i++) else else
}var poisecondcategorytd = $("");
var accessamounttd = $("");
var amountriseindextd = $("");
var commissionriseindextd = $("");
var eventconfigdtolist = eventlist[i].eventconfigdtolist;
if (eventconfigdtolist != null) else if (eventconfigdtolist[j].attributekey == "accessamount") else if (eventconfigdtolist[j].attributekey == "amountriseindex") else if (eventconfigdtolist[j].attributekey == "commissionamountriseindex") }}
//生效日期
if (eventlist[i].eventbegintime == null) else
}//重新渲染頁面
form.render();
querypoiname(poiidliststr);
$(".layui-form-checkbox").click(function () else
});}
});}
function querypoiname(poiidliststr) ,
success: function (data)
}});
},error: function ()
});}
layui.use(['layer', 'form', 'laypage', 'element'], function()
//預設頁面初始載入時自動查詢第一頁的資料
queryevents(1);
var index = parent.layer.getframeindex(window.name); //獲取視窗索引
//關閉頁面
$('#closebutton').on('click', function() else
parent.layer.close(index);
});});
vue版活動id
活動名稱
行業本月准入交易額
交易額增幅指標
佣金收入增幅指標
生效日期
未查找到資料}}}
}}}
}
未選擇任何活動
已選擇活動:}
確定
小結
功能上,vue版比jquery版少了查詢poi分類名稱的功能,**量約30行。
jquery版js**行數:214
vue版js**行數:90+30=120
可見實現同樣的功能,vue版比jquery版**裡少了近50%。而且vue不用關心資料模型與頁面同步的問題,只要更新了資料,頁面會立即同步更新,簡直不能更省心。
本次專案中js**量約2650行,其中大量的**都是為了更新資料模型與頁面的對應關係。寫**時要時刻關心頁面是否顯示了最新的資料,虐心!!!
今後專案中將盡量避免使用jquery
楊元慶拋棄了馬雲擁抱了強東,實則也是無奈地妥協
今天有趣的事情是,聯想拋棄了老相好的蘇寧天貓,拋棄了和柳傳志交好的馬雲叔叔,投入了京東劉強東的懷抱。等等,打住,怎麼八姐依稀彷彿記得,就在楊元慶618和蘇寧天貓秀恩愛的前不久,京東還蹊蹺下架了所有聯想的手機啊?愛馬,這峰迴路轉 令人錯愕的三角戀都是什麼鬼啊?仔細咂摸一下,八姐覺得吧,這背後實則反映的...
vue 專案 引入jquery
1 在專案中安裝jquery。npm install jquery 2 在專案根目錄下的build webpack.base.conf.js檔案中 先寫以下 var webpack require webpack 在module.exports的最後寫 3 在根目錄下的 src main.js中引入...
vue怎麼使用jQuery
有時候想在vue裡面使用jquery的功能或者要用jquery寫的現有功能,就很煩,vue到底怎麼使用jquery呢,首先vue要想使用外掛程式需要npm install jquery 但是這樣是普通外掛程式的使用方式,jquery這樣用可不行,需要修改build下的 webpack.base.co...