完善慕课网Vue2.0购物车功能

Posted 2020-09-14 HtmlCss3

vue一个Made in China创造出来的框架真的很66666~

如果你是刚入门还不太懂也没有看慕课网上这门视频的，请先看一遍或许你会收获满满~

使用vue2.0实现购物车和地址选配功能这门课程，早之前就在慕课网上看了，个人感觉很不错很适合刚入门vue的新手，最近做的项目都没用vue怕自己生疏了所以就再做一下练练手顺便完善一下老师没有做的小功能。

课程中实现的功能：商品列表的渲染、使用过滤器格式化商品金额、实现单件商品的计算单选全选、实现商品总金额计算和删除商品

完善的功能：

单选按钮如果全部选中则全选按钮为选中状态，如果没有全部选中则为默认状态

使用计算属性来改写计算总金额；》

 

先看一下完善后的效果图：

 

先创建一个vue的实例，以下列出的是本项目使用的选项参数

new Vue({
    el: \'\',  //挂载的元素
    data: {},  //数据
    mounted(){},  //生命周期钩子
    computed: {}, //计算属性
    methods: {},  //方法
    filters:{}   //过滤器
})

 

vue中常用的指令，本项目用到的是 v-for、v-bind、v-on、v-model、v-show

v-bind     动态的绑定数据。简写为 : 
         
v-on       绑定事件监听器。简写为 @

v-for      循环数据     
        
v-model    在表单控件元素上创建双向数据绑定

v-if   v-else-if   v-else     条件判断指令

 

vue中的生命周期钩子函数，本项目用到的是 mounted 钩子函数

beforeCreate       数据绑定前

created            数据绑定后

beforeMount        挂载之前

mounted            挂载之后

beforeUpdate       更新之前

updated            更新之后

beforeDestroy      销毁之前

destroyed          销毁之后

 

这里简但说一下思路，没看过视频想深入学习的请前往慕课网。

1、在data里声明一个lists数组，用vue-resource获取数据，把它写成一个fetchData方法放在methods里，在mounted后调用这个方法把返回结果赋给lists

vue-resource和ajax一样都是用来获取数据的，但vue-resource返回的res是经过封装的,我们需要的数据在body那个属性里也可以使用data都可以

 

fetchData(){
    var _self = this;
    this.$http.get("../data/cart.json").then(function(res){
        _self.lists = res.data.result.productList
    },function(){

    })
}

2、使用v-for渲染商品列表, v-for写法 v-for="item in items" 

3、使用filter过滤器将页面所有的金额格式化统一保留两位小数并添加“￥”符号：

全局过滤器方法：把 filter 挂到 Vue 上，Vue.filter(name,func); 第一个参数就是过滤器的名字，第二个参数就是一个回调函数 ，这里要注意一点如果你按照课上所写的讲全局过滤器写在了底部，当你结合计算属性computed使用的时候会报错，所以将声明的全局使用的都放在最顶端，让它先加载

Vue.filter(\'money\',function(val,type) {
    return "￥" + val.toFixed(2) + type;
});

局部过滤器方法：就是在之前实例里的 filters 选项参数里声明

filters:{
    formatMoney: function(val){
        return "￥" + val.toFixed(2);
    }
}

4、给 “+” 和 “-” 添加点击事件，点击事件用 v-on:click 可以缩写为 @click ，方法都写在methods里，利用vue的数据双向绑定 v-model指令来绑定 input里的值，至于这里传的 item 和 -1这些参数，老师都讲过了，不明白的去看视频

<a href="javascript:;" @click="change(item,-1)">-</a>
<input type="text" disabled v-model="item.productQuentity">
<a href="javascript:;" @click="change(item,1)">+</a>

定义一个change方法

change(item,type){
    if(type>0){
        item.productQuentity++
    }else{
        item.productQuentity--;
        if(item.productQuentity<1){
            item.productQuentity=1
        }    
    }
}

5、给单选按钮添加事件，同时需要使用 v-bind:class 动态添加class来改变按钮选中和未选中样式，如果你想实现淘宝或京东那种效果就是当你把单选按钮都选中后底下的全选按钮就要变为了选中状态，这里你就需要在data里再声明一个属性 checkNum 用它来计算当前有几个是选中状态，所以在点击按钮的时候就要让 checkNum++, 最后判断 checkNum 是否等于按钮的长度，就是这么简单，就是这么自然~

<a href="javascipt:;" class="item-check-btn" :class="{\'check\':item.checked}" @click="chose(item)">
<svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
</a>

chose(item){
    if(typeof item.checked == "undefined"){
        this.$set(item,\'checked\',true);
        this.checkNum++
    }else{
        item.checked = !item.checked;
        if(item.checked){
            this.checkNum++
        }else{
            this.checkNum--
        }
    }
    this.lists.forEach( (element, index) => {
        if(element.checked && this.checkNum==this.lists.length){
            this.flag=true
        }else{
            this.flag = false
        }
    })
    if(this.flag){
        this.checkFlag = true
    }else{
        this.checkFlag = false
    }
}

6、给全选和取消全选按钮添加事件同时动态绑定class,这就很简单了直接循环遍历，把所有对象里checked属性设为 true,这里有一点需要注意的是当你全选或取消全选的时候一定要改变data里 checkNum 的值

selectAll(type){
    this.checkFlag = type;
    this.lists.forEach( (element, index) => {
        if(typeof element.checked == "undefined"){
            this.$set(element,\'checked\',type)
        }else{
            element.checked = type
        }
    });
    if(type){
        this.checkNum = this.lists.length
    }else{
        this.checkNum = 0;
    }
}

7、接下来就是计算总金额了，课上老师讲的是在methods里写了一个方法，在点击增加和减少按钮的时候去调用，我这里是用计算属性computed来实现的，计算属性的好处就是如果有改变了它会自动重新计算，不用再去点击按钮的时候调用，这里用到的 allMoney 需要在data里声明一下：

computed: {
    totalMoney(){
        this.allMoney = 0;
        this.lists.forEach( (item, key) => {
            if(typeof item.checked != "undefined" && item.checked==true){
                this.allMoney += item.productQuentity*item.productPrice
            }
        });
        return this.allMoney
    }
}

8、删除功能，点击删除按钮弹出遮罩层和对话框，对于动态切换显隐我们可以动态添加class也可以使用 v-if / v-show, 先在data里声明一个 iShow 来控制显隐，对于弹框我们绑定class这样写v-bind:class="{\'md-show\':iShow}" ,对于遮罩层我们使用v-show这样写v-show="iShow"，然后为删除按钮添加事件同时把删除的元素传递过去，在data里声明一个 deletId 用来记录删除的元素

<a href="javascript:;" class="item-edit-btn" @click="delet(item)">
<svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
</a>

delet(item){
    this.iShow=true;
    this.deletId = this.lists.indexOf(item);
},
deletOk(){
    this.lists.splice(this.deletId,1);
    this.iShow=false;
}

 

ok ，整个思路就这样了，你也可以去看视频自己试着练一下

技术更新实在太快了，就在今天Vue2.3.0发布了同时还发布了Vue2.3.0服务端渲染，如果你想了解vue可以猛击下面的链接：

https://cn.vuejs.org/v2/guide/installation.html
    

Vue.js

Vuejs 2.0