欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

jquery和vue對比有什么不同

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

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網綜合服務，包含不限于成都網站建設、網站設計、鄢陵網絡推廣、微信小程序定制開發(fā)、鄢陵網絡營銷、鄢陵企業(yè)策劃、鄢陵品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供鄢陵建站搭建服務，24小時服務熱線：18982081108，官方網址：www.chinadenli.net

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

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

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

3.vue和jquey對比

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

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

4.舉例說明

場景一：列表添加一個元素,下圖為vue和jquery兩種操作的代碼，我們從中可以看出vue只需要向數據message里面push一條數據即可完成添加一個li標簽的操作，而jquery則需要獲取dom元素節(jié)點，并對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>

jquery和vue對比有什么不同

場景二：控制按鈕的顯示隱藏，下圖為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>

 輸出結果：

jquery和vue對比有什么不同

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

 vue適用的場景：復雜數據操作的后臺頁面，表單填寫頁面

jquery適用的場景：比如說一些html5的動畫頁面，一些需要js來操作頁面樣式的頁面

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

5. 附上公司前端目錄結構，感興趣的可以分享代碼給大家看看

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

jquery和vue對比有什么不同

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

jquery和vue對比有什么不同

感謝你能夠認真閱讀完這篇文章，希望小編分享的“jquery和vue對比有什么不同”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

網站題目：jquery和vue對比有什么不同
本文網址：http://www.chinadenli.net/article20/pgegco.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、移動網站建設、網站收錄、全網營銷推廣、定制網站、電子商務

廣告

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

成都網站建設