jquery和vue對(duì)比有什么不同-創(chuàng)新互聯(lián)

這篇文章主要介紹了jquery和vue對(duì)比有什么不同，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的遼寧網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

前言：很多人說jquey和vue沒有什么可比的，應(yīng)該和Angular，React來比吧，我到覺得他們倒沒有多大的可比性，都是基于mvvm思想設(shè)計(jì)的框架，無(wú)非就是實(shí)現(xiàn)的方式不一樣，在不同場(chǎng)景下性能上會(huì)有一些差異。然而從jquery到vue或者說是到mvvm的轉(zhuǎn)變則是一個(gè)思想想的轉(zhuǎn)變，是將原有的直接操作dom的思想轉(zhuǎn)變到操作數(shù)據(jù)上去，難道不是一個(gè)根本性的改變嗎？

1.jquery介紹：想必大家都用過jquery吧，這個(gè)曾經(jīng)也是現(xiàn)在依然最流行的web前端js庫(kù)，可是現(xiàn)在無(wú)論是國(guó)內(nèi)還是國(guó)外他的使用率正在漸漸被其他的js庫(kù)所代替，隨著瀏覽器廠商對(duì)HTML5規(guī)范統(tǒng)一遵循以及ECMA6在瀏覽器端的實(shí)現(xiàn)，jquery的使用率將會(huì)越來越低

2.vue介紹：vue是一個(gè)興起的前端js庫(kù)，是一個(gè)精簡(jiǎn)的MVVM。從技術(shù)角度講，Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，通過對(duì)數(shù)據(jù)的操作就可以完成對(duì)頁(yè)面視圖的渲染。當(dāng)然還有很多其他的mvmm框架如Angular，React都是大同小異，本質(zhì)上都是基于MVVM的理念。然而vue以他獨(dú)特的優(yōu)勢(shì)簡(jiǎn)單，快速，組合，緊湊，強(qiáng)大而迅速崛起

3.vue和jquey對(duì)比

jQuery是使用選擇器（$）選取DOM對(duì)象，對(duì)其進(jìn)行賦值、取值、事件綁定等操作，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。

Vue則是通過Vue對(duì)象將數(shù)據(jù)和View完全分離開來了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象，可以說數(shù)據(jù)和View是分離的，他們通過Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定。這就是傳說中的MVVM。

4.舉例說明

場(chǎng)景一：列表添加一個(gè)元素,下圖為vue和jquery兩種操作的代碼，我們從中可以看出vue只需要向數(shù)據(jù)message里面push一條數(shù)據(jù)即可完成添加一個(gè)li標(biāo)簽的操作，而jquery則需要獲取dom元素節(jié)點(diǎn)，并對(duì)dom進(jìn)行添加一個(gè)標(biāo)簽的操作，如果dom結(jié)構(gòu)特別復(fù)雜，或者添加的元素非常復(fù)雜，則代碼會(huì)變得非常復(fù)雜且閱讀性低

vue:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>

<body>
  <div id="app">
    <ul>
      <!--根據(jù)數(shù)組數(shù)據(jù)自動(dòng)渲染頁(yè)面-->
      <li v-for="item in message">{{item}}</li>
    </ul>
    <button @click="add">添加數(shù)據(jù)</button>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: ["第1條數(shù)據(jù)","第2條數(shù)據(jù)"],
      i:2
    },
    methods:{
      //向數(shù)組添加一條數(shù)據(jù)即可
      add:function(){
        this.i++
        this.message.push("第"+this.i+"條數(shù)據(jù)")
      }
    }
  })
</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條數(shù)據(jù)</li>
      <li>第2條數(shù)據(jù)</li>
    </ul>
    <button id="add">添加數(shù)據(jù)</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操作在最后一個(gè)li元素后手動(dòng)添加一個(gè)標(biāo)簽
   $("#list").children("li").last().append("<li>第"+i+"條數(shù)據(jù)</li>")
  }); 
 }); 
</script>

jquery和vue對(duì)比有什么不同

場(chǎng)景二：控制按鈕的顯示隱藏，下圖為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>
      <!--根據(jù)數(shù)組數(shù)據(jù)自動(dòng)渲染頁(yè)面-->
      <li v-for="item in message">{{item}}</li>
    </ul>
    <button @click="add" v-show="isShow">添加數(shù)據(jù)</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條數(shù)據(jù)","第2條數(shù)據(jù)"],
      i:2,
      isShow:true
    },
    methods:{
      //向數(shù)組添加一條數(shù)據(jù)即可
      add:function(){
        this.i++
        this.message.push("第"+this.i+"條數(shù)據(jù)")
      },
      //控制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條數(shù)據(jù)</li>
      <li>第2條數(shù)據(jù)</li>
    </ul>
    <button id="add">添加數(shù)據(jù)</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操作在最后一個(gè)li元素后手動(dòng)添加一個(gè)標(biāo)簽
   $("#list").children("li").last().append("<li>第"+i+"條數(shù)據(jù)</li>")
  }); 
  //需要手動(dòng)隱藏dom元素
  $("#showButton").click(function(){
    $("#add").hide()
  })
 }); 
</script>

輸出結(jié)果：

jquery和vue對(duì)比有什么不同

4.總結(jié)：內(nèi)容講的比較淺，主要就是分析一下vue和jquey對(duì)比的區(qū)別，上面兩個(gè)例子只是做了一個(gè)簡(jiǎn)單的說明，然而vue能解決的問題遠(yuǎn)比這些要多的多，復(fù)雜的多。

vue適用的場(chǎng)景：復(fù)雜數(shù)據(jù)操作的后臺(tái)頁(yè)面，表單填寫頁(yè)面

jquery適用的場(chǎng)景：比如說一些html5的動(dòng)畫頁(yè)面，一些需要js來操作頁(yè)面樣式的頁(yè)面

然而二者也是可以結(jié)合起來一起使用的，vue側(cè)重?cái)?shù)據(jù)綁定，jquery側(cè)重樣式操作，動(dòng)畫效果等，則會(huì)更加高效率的完成業(yè)務(wù)需求

5. 附上公司前端目錄結(jié)構(gòu)，感興趣的可以分享代碼給大家看看

src代碼目錄包含assets靜態(tài)文件，components vue組件文件，plugins 插件文件（包含登錄操作，http請(qǐng)求操作，過濾器，加解密操作，公共方法等），router 路由文件，store vuex文件，app.js vue相關(guān)配置，index.html主頁(yè)面

jquery和vue對(duì)比有什么不同

build目錄為webpack打包文件，dist目錄為打包后生成的文件，node_modules 引用的外部組件

jquery和vue對(duì)比有什么不同

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jquery和vue對(duì)比有什么不同”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前標(biāo)題：jquery和vue對(duì)比有什么不同-創(chuàng)新互聯(lián)
文章起源：http://www.muchs.cn/article40/cshpho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站內(nèi)鏈、企業(yè)建站、建站公司、動(dòng)態(tài)網(wǎng)站、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容