Jquery和vue對比
前言:很多人說jquey和vue沒有什麼可比的,應該和Angular,React來比吧,我到覺得他們倒沒有多大的可比性,都是基於mvvm思想設計的框架,無非就是實現的方式不一樣,在不同場景下效能上會有一些差異。然而從jquery到vue或者說是到mvvm的轉變則是一個思想想的轉變,是將原有的直接操作dom的思想轉變到操作資料上去,難道不是一個根本性的改變嗎?
1.jquery介紹:想必大家都用過jquery吧,這個曾經也是現在依然最流行的web前端js庫,可是現在無論是國內還是國外他的使用率正在漸漸被其他的js庫所代替,隨著瀏覽器廠商對HTML5規範統一遵循以及ECMA6在瀏覽器端的實現,jquery的使用率將會越來越低
2.vue介紹:vue是一個興起的前端js庫,是一個精簡的MVVM。從技術角度講,Vue.js 專注於 MVVM 模型的 ViewModel 層。它通過雙向資料繫結把 View 層和 Model 層連線了起來,通過對資料的操作就可以完成對頁面檢視的渲染。當然還有很多其他的mvmm框架如Angular,React都是大同小異,本質上都是基於MVVM的理念。 然而vue以他獨特的優勢簡單,快速,組合,緊湊,強大而迅速崛起
3.vue和jquey對比
jQuery是使用選擇器($)選取DOM物件,對其進行賦值、取值、事件繫結等操作,其實和原生的HTML的區別只在於可以更方便的選取和操作DOM物件,而資料和介面是在一起的。比如需要獲取label標籤的內容:$("lable").val();
Vue則是通過Vue物件將資料和View完全分離開來了。對資料進行操作不再需要引用相應的DOM物件,可以說資料和View是分離的,他們通過Vue物件這個vm實現相互的繫結。這就是傳說中的MVVM。
4.舉例說明
場景一:列表新增一個元素,下圖為vue和jquery兩種操作的程式碼,我們從中可以看出vue只需要向資料message裡面push一條資料即可完成新增一個li標籤的操作,而jquery則需要獲取dom元素節點,並對dom進行新增一個標籤的操作,如果dom結構特別複雜,或者新增的元素非常複雜,則程式碼會變得非常複雜且閱讀性低
vue:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul> <!--根據陣列資料自動渲染頁面--> <li v-for="item in message">{{item}}</li> </ul> <button @click="add">新增資料</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: ["第1條資料","第2條資料"], i:2 }, methods:{ //向陣列新增一條資料即可 add:function(){ this.i++ this.message.push("第"+this.i+"條資料") } } }) </script>
jquery:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul id="list"> <li>第1條資料</li> <li>第2條資料</li> </ul> <button id="add">新增資料</button> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var i=2; $('#add').click(function() { i++; //通過dom操作在最後一個li元素後手動新增一個標籤 $("#list").children("li").last().append("<li>第"+i+"條資料</li>") }); }); </script>
場景二:控制按鈕的顯示隱藏,下圖為vue和jquery兩種操作的程式碼,我們從中可以看出vue只需要控制屬性isShow的值為true和false即可,而jquery則還是需要操作dom元素控制按鈕的顯示和隱藏
vue:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul> <!--根據陣列資料自動渲染頁面--> <li v-for="item in message">{{item}}</li> </ul> <button @click="add" v-show="isShow">新增資料</button> <button @click="showButton">隱藏按鈕</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: ["第1條資料","第2條資料"], i:2, isShow:true }, methods:{ //向陣列新增一條資料即可 add:function(){ this.i++ this.message.push("第"+this.i+"條資料") }, //控制isShow的值即可 showButton:function(){ this.isShow=false; } } }) </script>
jquery:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul id="list"> <li>第1條資料</li> <li>第2條資料</li> </ul> <button id="add">新增資料</button> <button id="showButton">隱藏按鈕</button> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var i=2; $('#add').click(function() { i++; //通過dom操作在最後一個li元素後手動新增一個標籤 $("#list").children("li").last().append("<li>第"+i+"條資料</li>") }); //需要手動隱藏dom元素 $("#showButton").click(function(){ $("#add").hide() }) }); </script>
輸出結果:
4.總結:內容講的比較淺,主要就是分析一下vue和jquey對比的區別,上面兩個例子只是做了一個簡單的說明,然而vue能解決的問題遠比這些要多的多,複雜的多。
vue適用的場景:複雜資料操作的後臺頁面,表單填寫頁面
jquery適用的場景:比如說一些html5的動畫頁面,一些需要js來操作頁面樣式的頁面
然而二者也是可以結合起來一起使用的,vue側重資料繫結,jquery側重樣式操作,動畫效果等,則會更加高效率的完成業務需求
5. 附上公司前端目錄結構,感興趣的可以分享程式碼給大家看看
src程式碼目錄包含assets靜態檔案,components vue元件檔案,plugins 外掛檔案(包含登入操作,http請求操作,過濾器,加解密操作,公共方法等),router 路由檔案,store vuex檔案,app.js vue相關配置,index.html主頁面
build目錄為webpack打包檔案,dist目錄為打包後生成的檔案,node_modules 引用的外部元件