一聚教程網︰一個值得你收藏的教程網站

最新下載

秒速赛车-秒速赛车官方网站「秒速赛车开奖查询」-「平安彩票网」

時間︰2019-04-16 17:20:00 編輯︰豬哥 來源︰轉載

前言︰很多人說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();,它還是依賴DOM元素的值。

Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象,可以說數據和View是分離的,他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

4.舉例說明

場景一︰列表添加一個元素,下圖為vue和jquery兩種操作的代碼,我們從中可以看出vue只需要向數據message里面push一條數據即可完成添加一個li標簽的操作,而jquery則需要獲取dom元素節點,並對dom進行添加一個標簽的操作,如果dom結構特別復雜,或者添加的元素非常復雜,則代碼會變得非常復雜且閱讀性低

vue:





  


      <kbd id='uytfm'></kbd><address id='ccnds'><style id='uqxnf'></style></address><button id='xpbjv'></button>

          • {{item}}
          <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:

          
          
          
          
            
          
          
          

              <kbd id='qrgqv'></kbd><address id='edero'><style id='nciyn'></style></address><button id='iovzq'></button>

                  • 第1條數據
                  • 第2條數據
                  <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("
                • 第"+i+"條數據
                • ") }); }); </script>

                  詳解jquery和vue對比的教程

                  場景二︰控制按鈕的顯示隱藏,下圖為vue和jquery兩種操作的代碼,我們從中可以看出vue只需要控制屬性isShow的值為true和false即可,而jquery則還是需要操作dom元素控制按鈕的顯示和隱藏

                  vue:

                  
                  
                  
                  
                    
                  
                  
                  

                      <kbd id='dcfns'></kbd><address id='cteck'><style id='cgkrb'></style></address><button id='cuahn'></button>

                          • {{item}}
                          <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︰

                          
                          
                          
                          
                            
                          
                          
                          

                              <kbd id='dbqnn'></kbd><address id='znpqj'><style id='ajkml'></style></address><button id='midcj'></button>

                                  • 第1條數據
                                  • 第2條數據
                                  <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("
                                • 第"+i+"條數據
                                • ") }); //需要手動隱藏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 引用的外部組件

                                  文章評論

                                  熱門欄目