擁抱Vue,拋棄jQuery

2022-02-22 06:01:40 字數 2590 閱讀 6496

做階梯價銷售提報系統著實被自己的**噁心了一把,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...