一、购物车案例
1.最少买一个商品

<button @click="item.count--" :disabled="item.count===1">-</button>

2.计算属性

computed:{
                //是否全选
                ckAll:{
                    set(val){
                        //循环所有的商品，设置商品的选中状态
                        this.goodses.forEach(r=>r.isck=val)
                    },
                    get(){
                        //数组的所有的商品都是选中状态，那么全选状态为true
                        return this.goodses.length===0 ? false : this.goodses.every(r=>r.isck)
                    }
                },
                //计算总计
                totalPrice(){
                    return this.goodses.filter(r=>r.isck).reduce((a,b)=>a+b.price*b.count,0)
                }
            },

3.方法

methods: {
                //删除商品
                delGoods(index){
                    if(confirm('是否确定删除？')){
                        this.goodses.splice(index,1)
                    }
                }
            },

4.过滤器

filters:{
                //数字保留两位小数
                toFixed2(val){
                    return val.toFixed(2)
                }
            }

二、课程管理
1.方法
01.加载数据的方法

async loadSubject(){
                    //发生请求，获取课程数据
                    let {data:{data,count}} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectsConditionPages',{
                        params:{
                            pageIndex:this.pageIndex,
                            pageSize:this.pageSize,
                            subjectName:this.searchText
                        }
                    })
                    //将获取到的数据，传给当前Vue实例管理
                    this.subjects = data
                    this.count = count
                },

02.加载年级的方法

async loadGrade(){
                    let {data} = await axios.get('http://www.bingjs.com:81/Grade/GetAll')
                    this.grades = data
                },

03.添加课程的方法

async addSubject(){
                    //解构出课程对象的三个属性
                    let {subjectName,classHour,gradeId} = this.subject
                    let {data} = await axios.post('http://www.bingjs.com:81/Subject/Add',{
                        subjectName,
                        classHour,
                        gradeId
                    })
                    if(data){
                        alert('添加成功！')
                        //调用加载课程信息的方法
                        this.loadSubject()
                        //调用清空表单数据的方法
                        this.clear()
                    }
                },

04.根据课程编号，查询一个课程信息

async getSubjectById(subjectId){
                    let {data} = await axios.get('http://www.bingjs.com:81/Subject/GetSubjectById',{
                        params:{
                            subjectId
                        }
                    })
                    // 获取课程信息
                    let {SubjectName:subjectName,ClassHour:classHour,GradeId:gradeId} = data
                    // 更新可定对象的信息
                    this.subject = {
                        subjectId,
                        subjectName,
                        classHour,
                        gradeId
                    }
                },

05.修改课程的方法

async updateSubject(){
                    //从课程对象里面解构出课程的相关信息
                    let {subjectId,subjectName,classHour,gradeId} = this.subject
                    let {data} = await axios.post('http://www.bingjs.com:81/Subject/Update',{
                        subjectId,
                        subjectName,
                        classHour,
                        gradeId
                    })
                    if(data){
                        alert('修改成功！')
                        //调用加载课程信息的方法
                        this.loadSubject()
                        //调用清空表单数据的方法
                        this.clear()
                    }
                },

06.删除课程的方法

async deleteSubjectById(subjectId){
                    if(!confirm('是否确定删除')) return
                    let {data} = await axios.post('http://www.bingjs.com:81/Subject/Delete',{subjectId})
                    if(data){
                        alert('删除成功！')
                        //调用加载课程信息的方法
                        this.loadSubject()
                    }
                },

07.清空表单数据的方法

clear(){
                    this.subject = {
                        subjectName:'',
                        classHour:0,
                        gradeId:0
                    }
                }

08.计算属性

computed:{
                //总页数
                totalPage(){
                    return Math.ceil(this.count/this.pageSize)
                }
            },

09.监听器

watch:{
                //监听当前页码是否发生变化
                pageIndex(){
                    this.loadSubject()
                }
            },

010.创建完成的生命周期-此时可操作数据了

created() {
                //调用加载课程信息的方法
                this.loadSubject()
                //调用加载年级信息的方法
                this.loadGrade()
            },