jquery和vue對比

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:

<!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 引用的外部組件

Tags: message 瀏覽器 jquery HTML5 標簽

文章來源：

jquery和vue對比

相關文章