利用vue.js寫一個購物車結算

阿新 • • 發佈：2018-11-29

利用vue.js寫一個購物車結算

筆者自學前端兩個月了，之前什麼輪播圖，自動載入的功能，寫了就忘了，還是太菜了。於是想開個部落格來記錄一下自己學習的歷程。第一篇，獻給這個購物車。大概下面那個效果把。在這裡插入圖片描述

先搭建一個html結構。~~第一個匯入的js庫即vue大家自己去下載哈~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="vue.js"></script>
    <title>購物車，結算你的商品！</title>
</head>
<body>
<div id="el">
    <input type="text" placeholder="請輸入商品名" class="text" v-model="commodity">
    <input type="text" placeholder="請輸入單價" class="text" v-model="price">
    <a  class="submit" @click="add()">新增商品</a>
    <div id="table"><span class="span">商品名</span>
        <span class="span">單價（元/瓶）</span>
        <span class="span">數量</span>
        <span class="span">合計（元）</span>
    </div>

    <script type="text/javascript" src="js.js"></script>
</div>
</body>
</html>

css樣式就不寫了，然後我們就考慮到我們有一個增加商品的功能，一次增加四個值，這個可以用vue元件解決（注意js裡return後面的第一個括號必須和return在一行，不然會返回undefined）
vue 可以實現資料的繫結，比起js的dom操作簡單不少，我們通過vue來簡便購物車的程式碼。
需要了解的語法：v-on即@ 觸發事件
v-bind 即：繫結屬性
v-model 繫結表單雙向繫結
{{}}雙括號裡面放的值是data裡的屬性名
還有v-for和元件相關語法，元件自己也不太懂呀，作為vue的最強大功能，傳值複雜的不行，~~想到以後還要看vue原始碼，太苦了呀（哭）~~

<todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id">
</todo-item>//兩個程式碼塊放一起了，上面是HTML下面是js，grocerylist是我們
//通過add函式往裡面傳值的列表，add函式下文會給出
component('todo-item', {
// todo-item 元件現在接受一個
// "prop"，類似於一個自定義特性。
// 這個 prop 名為 todo。

props: ['todo'],
data:function () {
    return{
        count：1},
template: '<div ><span class="span">{{todo.text1}}</span>'+
'<span class="span">{{todo.text2}}</span><a class="submit1" @click="if(count>1)count--;" >-</a>'+
'<span class="span3">{{count}}</span><a class="submit1" @click="count++"  >+</a>'+
'<span class="span4">{{todo.text2*count}}</span>'+
'</div>'

然後呢基本的搭建就形成了，我們還要統計總價這個工作要做，要知道總價的資料存在vue例項的data裡面，我們要從元件傳送元件的資料傳給總價分佈程式碼如下

       add: function () {
            this.groceryList.push({
                id: this.adid++,
                text1: this.commodity,
                text2: this.price
            });
            this.commodity = '';
            this.total = this.total + this.price * 1;
            this.price = '';
        },
        gets: function (msg) {
            this.total = this.total + msg * 1
        }

        ,
        gets1: function (msg) {
            this.total = this.total - msg * 1
        }
        //上面是vue例項裡的方法，下面是元件裡的方法
          methods:{
        set:function(){
            this.$emit("hey",this.todo.text2);},
        set1:function(){
            if (this.count>1)this.$emit("hey1",this.todo.text2);}
            //再下面是html
            <todo-item
                @hey="gets"
                @hey1="gets1"
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
        </todo-item>
            //特別需要注意！！！我們的外部屬性掛載一定要掛載元件標籤上！！！筆者
            //在這裡卡了好久，放在跟元素el的div裡面，就是傳不了值。（即@hey要在
            //todo-item標籤裡面），還有一點要注意的，傳值時要注意值是否正確，我之
            //前傳this.text2瘋狂除錯不知錯在哪，結果發現要傳this.todo.text2

        }

第一篇博文，都不知道怎麼講自己的心路歷程，從0開始vue，寫了個購物車，其實還有很多優化都沒做好，比如有效輸入的判斷呀，~~別被html注入給搞崩了~~ 。以後的前端後端專案，還有演算法競賽的好題，都寫部落格吧，可以鍛鍊自己的語言表達能力，反思自己思路錯在哪。最後附上專案的所有程式碼。

//html檔案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="vue.js"></script>
    <title>購物車，結算你的商品！</title>
</head>
<body>
<div id="el">
    <input type="text" placeholder="請輸入商品名" class="text" v-model="commodity">
    <input type="text" placeholder="請輸入單價" class="text" v-model="price">
    <a  class="submit" @click="add()">新增商品</a>
    <div id="table"><span class="span">商品名</span>
        <span class="span">單價（元/瓶）</span>
        <span class="span">數量</span>
        <span class="span">合計（元）</span>
    </div>
        <todo-item
                @hey="gets"
                @hey1="gets1"
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
        </todo-item>
    <div class="span span5" >總計{{total}}</div>
    <script type="text/javascript" src="js.js"></script>
</div>
</body>
</html>

//css檔案
*{margin: 0;
padding: 0;}
.text{width:15%;
    height: 30px;
    margin-left: 5%;
    border: solid gray 2px;
    border-radius: 10%;}
.submit{
    height: 25px;
    width: 7%;
    margin-left: 5%;
    border: solid gray 2px;
    border-radius: 10%;
    background-color:  rgba(30,144,255,0.7);
    color: white;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}
.submit1{height: 20px;
    width: 20px;
    border: solid gray 2px;
    border-radius: 50%;
    background-color:  rgba(30,144,255,0.7);
    color: white;
    display: inline-block;
    cursor: pointer;
    text-align: center;}
#table{hight:40px;
        width: 100%;
    background-color: pink;}
.span{display: inline-block;
    height: 70px;
    width: 20%;
    margin-left: 40px;
    font-size: 30px;
    line-height: 70px;}
.span3{display: inline-block;
    height: 70px;
    width: 5%;
    font-size: 30px;
    line-height: 70px;
    margin-left: 40px;}
.span4{display: inline-block;
    height: 70px;
    width: 5%;
    font-size: 30px;
    line-height: 70px;
    margin-left: 20%;}
.span5{float: right;}

//js vue庫自行下載
var vm=new Vue({
    el:'#el',
    data:{
        commodity:'',
        price:'',
        groceryList: [
            ],
        adid:0,
        total:0
    },
    methods: {
        add: function () {
            this.groceryList.push({
                id: this.adid++,
                text1: this.commodity,
                text2: this.price
            });
            this.commodity = '';
            this.total = this.total + this.price * 1;
            this.price = '';
        },
        gets: function (msg) {
            this.total = this.total + msg * 1
        }

        ,
        gets1: function (msg) {
            this.total = this.total - msg * 1
        }
    }

        })
Vue.component('todo-item', {
    // todo-item 元件現在接受一個
    // "prop"，類似於一個自定義特性。
    // 這個 prop 名為 todo。

    props: ['todo'],
    data:function () {
        return{
            count:1,
            }

    },
    template: '<div ><span class="span">{{todo.text1}}</span>'+
    '<span class="span">{{todo.text2}}</span><a class="submit1" @click="set1()" @click="if(count>1)count--;" >-</a>'+
    '<span class="span3" >{{count}}</span><a class="submit1" @click="set()" @click="count++" >+</a>'+
    '<span class="span4" >{{todo.text2*count}}</span>'+
    '</div>',
    methods:{
        set:function(){
            this.$emit("hey",this.todo.text2);},
        set1:function(){
            if (this.count>1)this.$emit("hey1",this.todo.text2);}

        }
    })

利用vue.js寫一個購物車結算