Vue初探——Vue是什么

littlelightss 發(fā)布于2019-08-21 15:20 / 1593人閱讀

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

本文代碼下載地址

概述

前端開發(fā)近況

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

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

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

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

寫這個博客的目的

希望能通過寫博客分享的方式更好的學(xué)習(xí)Vue和其它前端技術(shù)

希望能幫助到更多的同學(xué)更快速的學(xué)習(xí)Vue和其它前端技術(shù)

希望能賺點(diǎn)零花錢，如果你覺得我的文章幫助到了你，請?jiān)谖恼伦钕旅纥c(diǎn)打賞按鈕打賞我。打賞過的同學(xué)加我qq:791831347,我拉你進(jìn)我建的Vue交流群算是小小的回報(bào)吧，你在群里問的問題都會盡量得到解答，但不做任何承諾。

未來也可能計(jì)劃出一套視頻教程

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

Vue簡述

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

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

demo1 簡單修改文字

點(diǎn)擊按鈕后：
把hello，美女！歡迎學(xué)習(xí)Angular.

改為
hello，帥哥！歡迎學(xué)習(xí)Vue.

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


    Hello, 美女!
    歡迎學(xué)習(xí) Angular.

Vue代碼


    Hello, {{name}}!
    歡迎學(xué)習(xí) {{libName}}.

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

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

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

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

用一個更復(fù)雜的例子來說明Vue的優(yōu)勢

demo2-模擬一個簡易購物車

下面只是展示下兩種框架寫出來的代碼，感興趣的同學(xué)可以把代碼下下來。
-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袋】堅(jiān)果零食特產(chǎn)炒貨干果腰果仁",
                                pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1372RKXXXXXXnXVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                                price:42,
                                num:1,
                                isChecked:true,
                            },
                            {
                                name:"【三只松鼠_皇族牌牛奶夾心餅240g】臺灣進(jìn)口休閑零食夾心餅干",
                                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袋】零食堅(jiān)果山核桃長壽果干果奶油味",
                                pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1eTzgJVXXXXcIXFXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                                price:18.9,
                                num:1,
                                isChecked:true,

                            }],
         //這三個屬性分別綁定的是所有商品數(shù)量、總價(jià)格、時(shí)候全選
         totalCount:0,
         totalPrice:0,
         allCheck:true,
    },
    mounted: function () {
        //這里是vue初始化完成后執(zhí)行的函數(shù),注意vue1.x版本是ready方法,如無特別說明本人使用的都是Vue2.x
        this.calTotal();
    },
    methods:{
        //每一行增加商品的方法,根據(jù)索引值修改這一項(xiàng)對應(yīng)的數(shù)據(jù)源的值就可以了，Vue會幫你自動更新dom中相關(guān)的值
        add:function(index){
            var item = this.myListArr[index];
            item.num +=1;
            //計(jì)算總價(jià)和總件數(shù)
            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) {
                //如果沒有選中狀態(tài)肯定是沒有全選
                this.allCheck = false;
            }else {
                //如果是選中狀態(tài)先把全選選中，然后再每一項(xiàng)遍歷，如果有一項(xiàng)沒有選中就改為非全選狀態(tài)
                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(){
            //全選只需要所有的列表都跟全選狀態(tài)是同一個狀態(tài)就可以
            for (var i = 0; i < this.myListArr.length; i++) {
                var listItem = this.myListArr[i];
                listItem.isChecked = this.allCheck;
            }
            this.calTotal();
        },
        //計(jì)算總數(shù)
        calTotal:function(){
            //計(jì)算總件數(shù)
            this.calTotalCount();
            //計(jì)算總價(jià)格
            this.calTotalPrice();
        },
        //計(jì)算總件數(shù)
        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;
        },
        //計(jì)算總價(jià)格
        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(){
        //這里模擬數(shù)據(jù)，實(shí)際中是ajax請求網(wǎng)絡(luò)數(shù)據(jù)，并沒有太大差異
        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袋】堅(jiān)果零食特產(chǎn)炒貨干果腰果仁",
                            pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1372RKXXXXXXnXVXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                            price:42,
                            num:1,},
                        {
                            name:"【三只松鼠_皇族牌牛奶夾心餅240g】臺灣進(jìn)口休閑零食夾心餅干",
                            pic:"https://gw.alicdn.com/bao/uploaded/i3/TB1UK3uOVXXXXaiaXXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                            price:15.5,
                            num:3,},
                        {
                            name:"【三只松鼠_碧根果210gx2袋】零食堅(jiān)果山核桃長壽果干果奶油味",
                            pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1eTzgJVXXXXcIXFXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                            price:18.9,
                            num:1,}];
        //每個列表項(xiàng)對應(yīng)的html代碼，實(shí)際情況中只要先把html寫好然后拷貝去空格就好
        var listItemCodeStr = "
![]( 1.jpg)xxxxxxx
0
-+
0
刪除";

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

            //用數(shù)據(jù)填充dom列表項(xiàng)
            fillListWithData(jqueryListItem,listItemData)

            //把列表項(xiàng)添加到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++) {
                //如果當(dāng)前項(xiàng)和全選項(xiàng)不一樣則執(zhí)行選中單行操作
                if (checkList.get(i).checked != this.checked) {
                    checkList.get(i).click();
                }
            }
        });

    });

//返回每一行的數(shù)據(jù)
    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;
    }
//每一個商品的總價(jià)
    function getSubTotal(item){
        var listData = getTotalCountAndPrice(item);        
        item.find(".subTotal").eq(0).html(listData.totalPrice);
    }
//根據(jù)每一行的數(shù)據(jù)傳入修改所有商品總價(jià)格和總件數(shù)
    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 ));
    }

//根據(jù)列表項(xiàng)數(shù)據(jù)填充列表項(xiàng)和總價(jià)總數(shù)量
    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);
        //計(jì)算一行的總價(jià)格
        getSubTotal(jqueryListItem);
        //減商品個數(shù)的事件
        jqueryListItem.find(".reduce").click(function(event) {
            //個數(shù)輸入框，因?yàn)闀≈蒂x值用到幾次，所以提出來作變量
            var count_inputOBJ =  $(this).parent().find(".count_input").eq(0);
            var count_input = parseInt(count_inputOBJ.val());
            //輸入框的值為1就不允許再減個數(shù)了，輸入框最小值為1
            if (count_input == 1) {
                return;
            }
            count_input -= 1;
            count_inputOBJ.val(count_input);
            //更新每一行的總價(jià)格
            getSubTotal($(this).parent().parent());
            var itemCheck = $(this).parent().parent().find(".checkOne").get(0);
            if (itemCheck.checked) {
                //如果這個商品勾選了應(yīng)該更新整個總價(jià)格和總數(shù)量
                updateTotal($(this).parent().parent(),-1);
            }
        });
        //增加商品個數(shù)的事件,代碼同減商品個數(shù)不注釋
        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);
            }
        });
        //刪除某個商品的事件,代碼同加減商品個數(shù)不注釋
        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();
        });
        //跟列表項(xiàng)的check-box加事件
        jqueryListItem.find(".checkOne").click(function(event) {
            var listData = getTotalCountAndPrice($(this).parent().parent());
            if (this.checked) {
                //加上勾選項(xiàng)數(shù)量和價(jià)格
                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 {
                //減去勾選項(xiàng)
                updateTotal($(this).parent().parent(),-listData.count);
                //去掉全選
                var checkAllList = $(".checkAll");
                for (var j = 0; j < checkAllList.length; j++) {
                    checkAllList.get(j).checked = false;
                }

            }
        });
        //初始化總價(jià),每循環(huán)一個列表項(xiàng)就應(yīng)該把總數(shù)總價(jià)格更新下
         updateTotal(jqueryListItem,listItemData.num);
    }

總結(jié)

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

讀完這篇文章我希望您已經(jīng)學(xué)會了：

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

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