摘要：還是由于幫我們省略了操作，加上雙向數據綁定，的代碼量減少很多，大概還是要看具體項目。其中元素賦值和加事件又需要獲取元素和更元素賦值，也就是這個原因代碼量才會增加。

本文代碼下載地址

前端開發近況

需求依然旺盛，從JavaScript已經在編程語言排行榜上排到了第七位和前端聘崗位數就可以看出。

加入前端開發的新手越來越多，其中女孩子比例不少，自學能力稍有匱乏

前端框架層出不窮，部分前端開發精力跟不上

作為一名碼農最急需的是精通一門語言一個框架，然后再橫向去盡量多學一些技術，有助于融會貫通，專業精通才有高收入。

寫這個博客的目的

希望能通過寫博客分享的方式更好的學習Vue和其它前端技術

希望能幫助到更多的同學更快速的學習Vue和其它前端技術

希望能賺點零花錢，如果你覺得我的文章幫助到了你，請在文章最下面點打賞按鈕打賞我。打賞過的同學加我qq:791831347,我拉你進我建的Vue交流群算是小小的回報吧，你在群里問的問題都會盡量得到解答，但不做任何承諾。

未來也可能計劃出一套視頻教程

讓我們一起走在Vue進階的路上吧.(這個博客我會盡量說人話少說專業術語)

長期以來，前端都是Jquery為王這樣一個狀態，雖然從業時間比較長的前沿的前端開發者可能都已經接觸至少十多個框架了，但是大多數年輕的開發者可能都還只是對Jquery這樣的萬金油更熟悉一些，下面我會用幾個小例子來說明Jquery開發和Vue這樣的Mvvm框架開發模式上的不同。

用一個簡單的例子來說明編寫Jquery和Vue上的不同

demo1 簡單修改文字

點擊按鈕后：
把hello，美女！歡迎學習Angular.

改為
hello，帥哥！歡迎學習Vue.

jquery代碼(用以下代碼直接替換掉html文件中的body,看不懂沒關系后面會詳細說道Vue的方方面面)

    
Hello, 美女!
    
歡迎學習 Angular.
    修改

Vue代碼

    
Hello, {{name}}!
    
歡迎學習 {{libName}}.
    修改

tips 1 Jquery首先要獲取到dom對象，然后對dom對象進行進行值的修改等操作；

tips 2. Vue是首先把值和js對象進行綁定，然后修改js對象的值，Vue框架就會自動把dom的值就行更新。

tips 3. 可以簡單的理解為Vue幫我們做了dom操作，我們以后用Vue就需要修改對象的值和做好元素和對象的綁定，Vue這個框架就會自動幫我們做好dom的相關操作。

tips 4.這種dom元素跟隨JS對象值的變化而變化叫做單向數據綁定，如果JS對象的值也跟隨著dom元素的值的變化而變化就叫做雙向數據綁定，顧名思義單向和雙向?，后面會詳細介紹。

用一個更復雜的例子來說明Vue的優勢

demo2-模擬一個簡易購物車

下面只是展示下兩種框架寫出來的代碼，感興趣的同學可以把代碼下下來。
-Vue代碼

    
     

        

            
            
        

            
            
            {{item.name}}
        
{{item.price}}
        

            
            -
            
            +
        
        
{{(item.price* item.num).toFixed(2)}}
        

            刪除
    


var vm = new Vue({
    el: "#cart",
    data:{
         myListArr : [
                            {
                                name:"【三只松鼠_小賤拉面丸子85gx3】休閑零食膨化小吃干脆面串燒味",
                                pic:"https://gw.alicdn.com/bao/uploaded/i1/TB16tk_KpXXXXX7XVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                                price:22.8,
                                num:2,
                                isChecked:true,

                            },
                            {
                                name:"【三只松鼠_炭燒腰果185gx2袋】堅果零食特產炒貨干果腰果仁",
                                pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1372RKXXXXXXnXVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                                price:42,
                                num:1,
                                isChecked:true,
                            },
                            {
                                name:"【三只松鼠_皇族牌牛奶夾心餅240g】臺灣進口休閑零食夾心餅干",
                                pic:"https://gw.alicdn.com/bao/uploaded/i3/TB1UK3uOVXXXXaiaXXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                                price:15.5,
                                num:3,
                                isChecked:true,

                            },
                            {
                                name:"【三只松鼠_碧根果210gx2袋】零食堅果山核桃長壽果干果奶油味",
                                pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1eTzgJVXXXXcIXFXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                                price:18.9,
                                num:1,
                                isChecked:true,

                            }],
         //這三個屬性分別綁定的是所有商品數量、總價格、時候全選
         totalCount:0,
         totalPrice:0,
         allCheck:true,
    },
    mounted: function () {
        //這里是vue初始化完成后執行的函數,注意vue1.x版本是ready方法,如無特別說明本人使用的都是Vue2.x
        this.calTotal();
    },
    methods:{
        //每一行增加商品的方法,根據索引值修改這一項對應的數據源的值就可以了，Vue會幫你自動更新dom中相關的值
        add:function(index){
            var item = this.myListArr[index];
            item.num +=1;
            //計算總價和總件數
            this.calTotal();
        },
        //減商品
        reduce:function(index){
            var item = this.myListArr[index];
            //如果商品只有1件就不允許再減了，只能刪除
            if (item.num == 1) {
                return;
            }
            item.num -= 1;
            this.calTotal();
        },
        //刪除本行商品
        remove:function(index) {
            //splice 是array的批量刪除方法
            this.myListArr.splice(index,1);
            this.calTotal();
        },
        //單行的checkbox選中
        check:function(index){
            var listItem = this.myListArr[index];
            this.calTotal();
            if (!listItem.isChecked) {
                //如果沒有選中狀態肯定是沒有全選
                this.allCheck = false;
            }else {
                //如果是選中狀態先把全選選中，然后再每一項遍歷，如果有一項沒有選中就改為非全選狀態
                this.allCheck = true;

                for (var i = 0; i < this.myListArr.length; i++) {
                    var listItem1 = this.myListArr[i];
                    if (!listItem1.isChecked) {
                        this.allCheck = false;
                    }
                }
            }
        },
        //全選checkbox事件
        allCheckMethod:function(){
            //全選只需要所有的列表都跟全選狀態是同一個狀態就可以
            for (var i = 0; i < this.myListArr.length; i++) {
                var listItem = this.myListArr[i];
                listItem.isChecked = this.allCheck;
            }
            this.calTotal();
        },
        //計算總數
        calTotal:function(){
            //計算總件數
            this.calTotalCount();
            //計算總價格
            this.calTotalPrice();
        },
        //計算總件數
        calTotalCount: function () {
            var count = 0;
            for (var i = 0; i < this.myListArr.length; i++) {
                var listItem = this.myListArr[i];
                if (listItem.isChecked) {
                    count += listItem.num;
                }
            }
              this.totalCount = count;
        },
        //計算總價格
        calTotalPrice: function () {
            var price = 0.0;
            for (var i = 0; i < this.myListArr.length; i++) {
                var listItem = this.myListArr[i];
                if (listItem.isChecked) {
                     price = price + listItem.num * listItem.price;
                }
            }
            this.totalPrice = price;
        }
    },
});

Jquery代碼

$(function(){
        //這里模擬數據，實際中是ajax請求網絡數據，并沒有太大差異
        var myListArr = [{
                            name:"【三只松鼠_小賤拉面丸子85gx3】休閑零食膨化小吃干脆面串燒味",
                            pic:"https://gw.alicdn.com/bao/uploaded/i1/TB16tk_KpXXXXX7XVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                            price:22.8,
                            num:2,},
                        {
                            name:"【三只松鼠_炭燒腰果185gx2袋】堅果零食特產炒貨干果腰果仁",
                            pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1372RKXXXXXXnXVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                            price:42,
                            num:1,},
                        {
                            name:"【三只松鼠_皇族牌牛奶夾心餅240g】臺灣進口休閑零食夾心餅干",
                            pic:"https://gw.alicdn.com/bao/uploaded/i3/TB1UK3uOVXXXXaiaXXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                            price:15.5,
                            num:3,},
                        {
                            name:"【三只松鼠_碧根果210gx2袋】零食堅果山核桃長壽果干果奶油味",
                            pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1eTzgJVXXXXcIXFXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                            price:18.9,
                            num:1,}];
        //每個列表項對應的html代碼，實際情況中只要先把html寫好然后拷貝去空格就好
        var listItemCodeStr = "
![]( 1.jpg)xxxxxxx
0
-+
0
刪除
";

        //根據數據來添加每一項列表到dom上
        for (var i = 0; i < myListArr.length; i++) {
            //生成的列表項dom元素
            var jqueryListItem = $(listItemCodeStr);
            //對應列表項數據
            var listItemData = myListArr[i];

            //用數據填充dom列表項
            fillListWithData(jqueryListItem,listItemData)

            //把列表項添加到dom上
            $("#cart_item").append(jqueryListItem);
        }

        //跟兩個全選check-box加事件
        $(".checkAll").click(function(event) {
            var checkList = $(".checkOne");
            var checkAllList = $(".checkAll");

            //讓另一個按鈕也全選或者也不全選保持同步
            for (var i = 0; i < checkAllList.length; i++) {
                checkAllList.get(i).checked = this.checked;
            }

            for (var i = 0; i < checkList.length; i++) {
                //如果當前項和全選項不一樣則執行選中單行操作
                if (checkList.get(i).checked != this.checked) {
                    checkList.get(i).click();
                }
            }
        });

    });

//返回每一行的數據
    function getTotalCountAndPrice (item) {
        var count_input = parseInt(item.find(".count_input").eq(0).val());
        var price = parseFloat(parseFloat(item.find(".price").eq(0).text()).toFixed(2));
        var totalPrice = parseFloat((count_input*price).toFixed(2));

        var jsonData = {"count":count_input,"price":price,"totalPrice":totalPrice};
        return jsonData;
    }
//每一個商品的總價
    function getSubTotal(item){
        var listData = getTotalCountAndPrice(item);        
        item.find(".subTotal").eq(0).html(listData.totalPrice);
    }
//根據每一行的數據傳入修改所有商品總價格和總件數
    function updateTotal(item,count){
        var listData = getTotalCountAndPrice(item);        
        var listPrice = listData.price;

        var totalPrice = parseFloat($("#totalPrice").eq(0).text());
        var totalCount = parseInt($("#totalCount").eq(0).text());

        $("#totalPrice").text((totalPrice + count * listPrice ).toFixed(2));
        $("#totalCount").text((totalCount + count ));
    }

//根據列表項數據填充列表項和總價總數量
    function fillListWithData(jqueryListItem,listItemData){
        //首次跟一行列表賦值(一個商品)
        jqueryListItem.find("img").eq(0).attr("src", listItemData.pic);
        jqueryListItem.find("span").eq(0).html(listItemData.name);
        jqueryListItem.find(".price").eq(0).html(listItemData.price);
        jqueryListItem.find(".count_input").eq(0).val(listItemData.num);
        //計算一行的總價格
        getSubTotal(jqueryListItem);
        //減商品個數的事件
        jqueryListItem.find(".reduce").click(function(event) {
            //個數輸入框，因為會取值賦值用到幾次，所以提出來作變量
            var count_inputOBJ =  $(this).parent().find(".count_input").eq(0);
            var count_input = parseInt(count_inputOBJ.val());
            //輸入框的值為1就不允許再減個數了，輸入框最小值為1
            if (count_input == 1) {
                return;
            }
            count_input -= 1;
            count_inputOBJ.val(count_input);
            //更新每一行的總價格
            getSubTotal($(this).parent().parent());
            var itemCheck = $(this).parent().parent().find(".checkOne").get(0);
            if (itemCheck.checked) {
                //如果這個商品勾選了應該更新整個總價格和總數量
                updateTotal($(this).parent().parent(),-1);
            }
        });
        //增加商品個數的事件,代碼同減商品個數不注釋
        jqueryListItem.find(".add").click(function(event) {
            var count_inputOBJ =  $(this).parent().parent().find(".count_input").eq(0);
            var count_input = parseInt(count_inputOBJ.val());
            count_input += 1;
            count_inputOBJ.val(count_input);
            getSubTotal($(this).parent().parent());
            var itemCheck = $(this).parent().parent().find(".checkOne").get(0);
            if (itemCheck.checked) {
                updateTotal($(this).parent().parent(),1);
            }
        });
        //刪除某個商品的事件,代碼同加減商品個數不注釋
        jqueryListItem.find(".delete").click(function(event) {

            var itemCheck = $(this).parent().parent().find(".checkOne").get(0);
            if (itemCheck.checked) {
                var count_inputOBJ =  $(this).parent().parent().find(".count_input").eq(0);
                updateTotal($(this).parent().parent(),- parseInt(count_inputOBJ.val()));
            }
            $(this).parent().parent().remove();
        });
        //跟列表項的check-box加事件
        jqueryListItem.find(".checkOne").click(function(event) {
            var listData = getTotalCountAndPrice($(this).parent().parent());
            if (this.checked) {
                //加上勾選項數量和價格
                updateTotal($(this).parent().parent(),listData.count);
                //遍歷看是否是全選
                var checkList = $(".checkOne");
                var checkAllList = $(".checkAll");

                var allCheckTag = true ;
                for (var i = 0; i < checkList.length; i++) {
                    var checkItem = checkList.get(i);
                    if (!checkItem.checked) {
                        allCheckTag = false;
                        break;
                    }
                }
                if (allCheckTag) {
                    for (var j = 0; j < checkAllList.length; j++) {
                        checkAllList.get(j).checked = true;
                    }
                }
            }else {
                //減去勾選項
                updateTotal($(this).parent().parent(),-listData.count);
                //去掉全選
                var checkAllList = $(".checkAll");
                for (var j = 0; j < checkAllList.length; j++) {
                    checkAllList.get(j).checked = false;
                }

            }
        });
        //初始化總價,每循環一個列表項就應該把總數總價格更新下
         updateTotal(jqueryListItem,listItemData.num);
    }

總結

如果你有認真寫一下以下代碼，可能你會在再做類似的項目的時候再也不想使用Jquery,下面做一下對比：
1.由于Vue幫我們省略了dom操作，代碼變得比較簡潔，邏輯更加清晰。
2.還是由于Vue幫我們省略了dom操作，加上雙向數據綁定，Vue的代碼量減少很多，大概2/3(還是要看具體項目)。
3.Jquery 專注于dom操作，步驟一般為：獲取dom元素--> 跟dom元素賦值+加事件-->插入dom元素。 其中dom元素賦值和加事件又需要獲取dom元素和更dom元素賦值，也就是這個原因代碼量才會增加。Vue專注于數據：用戶只需要關注dom元素值對應綁定的數據，每次dom需要修改只需要去修改數據就可以了。
4.由于多個dom事件可能會同時修改一個元素的值，Vue只需要關注元素對應綁定的數據就可以了，這使得Vue在邏輯上會更加清晰

讀完這篇文章我希望您已經學會了：

1.知道Vue是以數據為中心的，你只需要關注數據，比類Jquery的優勢在于去dom操作和雙線數據綁定。
2.知道Vue.js的基本寫法，例如怎么引入vue.js，怎么聲明Vue實例，實例中能掛載的參數有el、methods，data等，el、methods、data又分別表示什么，methods內部的方法this可以引用Vue實例等等
3.了解到基本的Vue指令，比如v-model、v-on:click、@click、v-for、v-bind:src、:src,還有{{}}和@click方法里面可以傳參等等
4.最后希望你能把這個demo好好敲一敲，不管你理不理解代碼，熟練是學好一個框架的第一步，看再多聽再多，不如好好寫一下，有問題留言。

如果您覺得這篇文章對您有幫助，請打賞一下或去github上給個??，thanks。