搜尋
首頁web前端js教程jquery和vue對比實例分析
jquery和vue對比實例分析Mar 05, 2018 pm 05:00 PM
jquery實例分析對比

很多人說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:

jquery和vue對比實例分析

nbsp;html>
    <meta>
    <p>
        </p>
                             
  • {{item}}
  •         
             <script></script><script> new Vue({ el: &#39;#app&#39;, data: { message: ["第1条数据","第2条数据"], i:2 }, methods:{ //向数组添加一条数据即可 add:function(){ this.i++ this.message.push("第"+this.i+"条数据") } } })</script>

jquery和vue對比實例分析

jquery:

jquery和vue對比實例分析

nbsp;html>
    <meta>
    <p>
        </p>
                
  • 第1条数据
  •             
  • 第2条数据
  •         
             <script></script><script> $(document).ready(function() { var i=2; $(&#39;#add&#39;).click(function() { i++; //通过dom操作在最后一个li元素后手动添加一个标签 $("#list").children("li").last().append("<li>第"+i+"条数据") }); }); </script>

jquery和vue對比實例分析

 


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

vue :

jquery和vue對比實例分析

nbsp;html>
    <meta>
    <p>
        </p>
                             
  • {{item}}
  •         
                      <script></script><script> new Vue({ el: &#39;#app&#39;, 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和vue對比實例分析

 

jquery:

jquery和vue對比實例分析

nbsp;html>
    <meta>
    <p>
        </p>
                
  • 第1条数据
  •             
  • 第2条数据
  •         
                      <script></script><script> $(document).ready(function() { var i=2; $(&#39;#add&#39;).click(function() { i++; //通过dom操作在最后一个li元素后手动添加一个标签 $("#list").children("li").last().append("<li>第"+i+"条数据") }); //需要手动隐藏dom元素 $("#showButton").click(function(){ $("#add").hide() }) }); </script>

jquery和vue對比實例分析

 

 

 輸出結果:

## 

 

#4.總結:內容講的比較淺,主要就是分析一下vue和jquey對比的區別,上面兩個例子只是做了一個簡單的說明,然而vue能解決的問題遠比這些要多的多,複雜的多。

        vue適用的場景:複雜資料操作的後台頁面,表單填寫頁面

        jquery適用的場景:例如一些html5的動畫頁面,一些需要一些需要操作頁面樣式的頁面#js來操作頁面樣式的頁面#js

##    然而二者也是可以結合起來一起使用的,vue側重數據綁定,jquery側重樣式操作,動畫效果等,則會更加高效率的完成業務需求

 

#5. 附上公司前端目錄結構,有興趣的可以分享程式碼給大家看 

#

 src代码目录包含assets静态文件,components vue组件文件,plugins 插件文件(包含登录操作,http请求操作,过滤器,加解密操作,公共方法等),router 路由文件,store vuex文件,app.js vue相关配置,index.html主页面

 

build目录为webpack打包文件,dist目录为打包后生成的文件,node_modules 引用的外部组件 

  

补充阅读:

1.jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作
2.Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值就行更新。
3.可以简单的理解为Vue帮我们做了dom操作,我们以后用Vue就需要修改对象的值和做好元素和对
象的绑定,Vue这个框架就会自动帮我们做好dom的相关操作
4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定,如果JS对象的值也跟随着dom元素的
值的变化而变化就叫做双向数据绑定
用一个简单的例子来说明编写Jquery和Vue上的不同
修改文字
点击按钮后:

改为


(1)jQuery代码

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    </head>
    <body>
    <p>
        <p>大家好,我是<span id="name">张三<span>!</p>
        <p>我是一名<span id="jop">医生</span>.</p>
        <button id = "modifyBtn">修改</button>
    </p>
    <script type="text/javascript">
        $("#modifyBtn").click(function(){  
            $("#name").text("李四");  
            $("#jop").text("老师");  
        });  
    </script>
    </body>
    </html>

(2)Vue代码

  1. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <p id="app">
        <p>大家好,我是<span>{{name}}<span>!</p>
        <p>我是一名<span>{{jop}}</span>.</p>
        <button v-on:click="modifyInfo">修改</button>
    </p>
    <script>
    new Vue({  
        el: &#39;#app&#39;,  
        data:{  
            name:"张三",  
            jop:"医生"  
        },  
        methods:{  
            modifyInfo:function(){  
                this.name = "李四";  
                this.jop = "老师";  
            }  
        }  
    })  
    </script>
    </body>
    </html>

相关推荐:

vue与jquery实时监听用户输入状态代码分享

jQuery表单元素选择器实例讲解

jQuery基础语法使用方法

以上是jquery和vue對比實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境