2020-05-30——axios数据交互及全选多思维扩展

app.js

重点：

1.解决this指向问题的三种方式
2.ES6箭头函数的使用
3.三目运算替代if else
4.forEach遍历方法
5.JSONPlaceholder测试api的使用

功能实现

1.全选多思维扩展
2.最终以两行代码完成优化

window.onload = function(){
    //第一种方式
    //var vm = new Vue({ //全局实例化对象
    var vm = new Vue({
        el:"#app",
        data:{
            lists:[],
            checkAll:false, //全选的状态
            check:false,
        },
        methods:{
            // ES5 写法
            getLists:function(){
                //第二种方式 （实际项目开发过程中用到的最多的方式）
                //提前定义this
                //原因：“this是不断变化的，一般情况下由谁调用this就指向谁”
                var self = this;
                axios({
                    methods:"get", //get post put delete | 查询 添加 修改 删除
                    url:"http://jsonplaceholder.typicode.com/users", // 接口地址
                // }).then(function(res){ // 请求成功
                // 第三种方式
                // 原因：“ES6中，箭头函数的this指向定义者，由谁定义this指向谁”
                }).then(res=>{ // 请求成功
                    console.log(res);
                    // 由于this指向问题不能正常渲染数据
                    this.lists = res.data; // 渲染数据
                    // 解决方式
                    // 第一种方式
                    //vm.lists = res.data; // 渲染数据
                    //第二种方式
                    // self.lists = res.data;
                }).catch(function(error){ // 请求失败
                    console.log(error);
                })
            },
            // ES6 写法
            changeCheckAll(){ //触发全选
                // 普通for遍历方法
                // for( var i=0;i<this.lists.length;i++ ){
                //     this.lists[i].check = this.checkAll;
                // };
                // 高级一点的forEach遍历方法
                // this指向原因导致不能同步
                //this.lists.forEach(function(item,index){
                this.lists.forEach(item=>{
                    item.check = this.checkAll;
                });
            },
            curChange(){
                // 1.子选项打勾的个数
                // filter() 方法 筛选
                // var num = this.lists.filter(function(item){
                //     return item.check == true
                // }).length;
                // ES6箭头函数
                // var num = this.lists.filter(item => item.check).length;
                // console.log(num);
                // 2.判断个数 ==10  全选打勾  !=10  全选取消打勾
                // if(num==this.lists.length){
                //     this.checkAll = true;
                // }else{
                //     this.checkAll = false;
                // };
                // 三目运算 替代 if else
                // num == this.lists.length ? this.checkAll = true : this.checkAll = false;
                // 优化 every() 返回 true false
                // this.checkAll = this.lists.every(function(item){
                //     return item.check;
                // })
                // 采用ES6箭头函数
                this.checkAll = this.lists.every(item=>item.check);
            }
        },
        mounted:function(){
            this.getLists();
        }
    })
}

案例地址：http://jingrao.tianyuyezi.com/vue-demo/axios/index.html