Vue初探——Vue是什么

mindwind 發(fā)布于2019-08-30 15:53 / 1283人閱讀

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

本文代碼下載地址

概述

前端開(kāi)發(fā)近況

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

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

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

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

寫(xiě)這個(gè)博客的目的

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

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

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

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

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

Vue簡(jiǎn)述

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

用一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明編寫(xiě)Jquery和Vue上的不同

demo1 簡(jiǎn)單修改文字

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

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

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


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

Vue代碼


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

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

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

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

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

用一個(gè)更復(fù)雜的例子來(lái)說(shuō)明Vue的優(yōu)勢(shì)

demo2-模擬一個(gè)簡(jiǎn)易購(gòu)物車(chē)

下面只是展示下兩種框架寫(xiě)出來(lái)的代碼，感興趣的同學(xué)可以把代碼下下來(lái)。
-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】臺(tái)灣進(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)果山核桃長(zhǎng)壽果干果奶油味",
                                pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1eTzgJVXXXXcIXFXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                                price:18.9,
                                num:1,
                                isChecked:true,

                            }],
         //這三個(gè)屬性分別綁定的是所有商品數(shù)量、總價(jià)格、時(shí)候全選
         totalCount:0,
         totalPrice:0,
         allCheck:true,
    },
    mounted: function () {
        //這里是vue初始化完成后執(zhí)行的函數(shù),注意vue1.x版本是ready方法,如無(wú)特別說(shuō)明本人使用的都是Vue2.x
        this.calTotal();
    },
    methods:{
        //每一行增加商品的方法,根據(jù)索引值修改這一項(xiàng)對(duì)應(yīng)的數(shù)據(jù)源的值就可以了，Vue會(huì)幫你自動(dòng)更新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) {
                //如果沒(méi)有選中狀態(tài)肯定是沒(méi)有全選
                this.allCheck = false;
            }else {
                //如果是選中狀態(tài)先把全選選中，然后再每一項(xiàng)遍歷，如果有一項(xiàng)沒(méi)有選中就改為非全選狀態(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)是同一個(gè)狀態(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請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)，并沒(méi)有太大差異
        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】臺(tái)灣進(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)果山核桃長(zhǎng)壽果干果奶油味",
                            pic:"https://gw.alicdn.com/bao/uploaded/i2/TB1eTzgJVXXXXcIXFXXXXXXXXXX_!!0-item_pic.jpg_200x200q50s150.jpg_.webp",
                            price:18.9,
                            num:1,}];
        //每個(gè)列表項(xiàng)對(duì)應(yīng)的html代碼，實(shí)際情況中只要先把html寫(xiě)好然后拷貝去空格就好
        var listItemCodeStr = "
![]( 1.jpg)xxxxxxx
0
-+
0
刪除";

        //根據(jù)數(shù)據(jù)來(lái)添加每一項(xiàng)列表到dom上
        for (var i = 0; i < myListArr.length; i++) {
            //生成的列表項(xiàng)dom元素
            var jqueryListItem = $(listItemCodeStr);
            //對(duì)應(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);
        }

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

            //讓另一個(gè)按鈕也全選或者也不全選保持同步
            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;
    }
//每一個(gè)商品的總價(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){
        //首次跟一行列表賦值(一個(gè)商品)
        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);
        //減商品個(gè)數(shù)的事件
        jqueryListItem.find(".reduce").click(function(event) {
            //個(gè)數(shù)輸入框，因?yàn)闀?huì)取值賦值用到幾次，所以提出來(lái)作變量
            var count_inputOBJ =  $(this).parent().find(".count_input").eq(0);
            var count_input = parseInt(count_inputOBJ.val());
            //輸入框的值為1就不允許再減個(gè)數(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) {
                //如果這個(gè)商品勾選了應(yīng)該更新整個(gè)總價(jià)格和總數(shù)量
                updateTotal($(this).parent().parent(),-1);
            }
        });
        //增加商品個(gè)數(shù)的事件,代碼同減商品個(gè)數(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);
            }
        });
        //刪除某個(gè)商品的事件,代碼同加減商品個(gè)數(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)一個(gè)列表項(xiàng)就應(yīng)該把總數(shù)總價(jià)格更新下
         updateTotal(jqueryListItem,listItemData.num);
    }

總結(jié)

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

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

1.知道Vue是以數(shù)據(jù)為中心的，你只需要關(guān)注數(shù)據(jù)，比類(lèi)Jquery的優(yōu)勢(shì)在于去dom操作和雙線(xiàn)數(shù)據(jù)綁定。
2.知道Vue.js的基本寫(xiě)法，例如怎么引入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.最后希望你能把這個(gè)demo好好敲一敲，不管你理不理解代碼，熟練是學(xué)好一個(gè)框架的第一步，看再多聽(tīng)再多，不如好好寫(xiě)一下，有問(wèn)題留言。

如果您覺(jué)得這篇文章對(duì)您有幫助，請(qǐng)打賞一下或去github上給個(gè)??，thanks。

GPU云服務(wù)器云服務(wù)器 vue是什么 vue是什么軟件 Vue_Vue Vue

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116572.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mindwind

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

通過(guò)gzip和nginx來(lái)提高網(wǎng)站打開(kāi)速度

閱讀 3056·2021-09-03 10:33
Vue初探——Vue是什么

閱讀 1284·2019-08-30 15:53
WebView的一些簡(jiǎn)單用法

閱讀 2633·2019-08-30 15:45
2.Vue子組件給父組件通信

閱讀 3392·2019-08-30 14:11
一個(gè)菜鳥(niǎo)(老yin逼)教后端的你如何"一天"做好微信小程序

閱讀 546·2019-08-30 13:55
css布局的各種FC簡(jiǎn)單介紹：BFC，IFC，GFC，F(xiàn)FC

閱讀 2595·2019-08-29 15:24
24 個(gè)實(shí)例入門(mén)并掌握「Webpack4」(三)

閱讀 1926·2019-08-26 18:26
如何檢查一個(gè)對(duì)象是否為空

閱讀 3578·2019-08-26 13:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue初探——Vue是什么

前端開(kāi)發(fā)近況

寫(xiě)這個(gè)博客的目的

用一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明編寫(xiě)Jquery和Vue上的不同

demo1 簡(jiǎn)單修改文字

用一個(gè)更復(fù)雜的例子來(lái)說(shuō)明Vue的優(yōu)勢(shì)

demo2-模擬一個(gè)簡(jiǎn)易購(gòu)物車(chē)

總結(jié)

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

相關(guān)文章

**初探Vue之環(huán)境搭建**

vue實(shí)現(xiàn)原理初探

Vue.js 官方示例初探（ES6 改寫(xiě)）

Vue中父子組件生命周期執(zhí)行順序初探

gulp和webpack初探

vue初探-簡(jiǎn)易留言板

發(fā)表評(píng)論

0條評(píng)論

mindwind

男|高級(jí)講師

TA的文章

通過(guò)gzip和nginx來(lái)提高網(wǎng)站打開(kāi)速度