vue Day04

作用域插槽

/*
作用域插槽:父组件对子组件的内容进行加工处理
在插槽中火气子组件的属性通过slot标签，通过属性绑定的方法获取子组件数据；
在模板中写入{{item.name}}给slot标签添加动态属性
在标签中通过来接收数据；最后显示页面

 <div id="app">
        <fruit-list :list='list'>
            <template slot-scope="slotProp">
                <strong  v-if="slotProp.item.id == 2" class="current">{{slotProp.item.name}}</strong>
                <span v-else> {{slotProp.item.name}}</span>
            </template>
        </fruit-list>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
                                          */
        Vue.component('fruit-list', {
            props: ['list'],
            template: `
                <div>
                    <li v-for='item in list' :key='item.id'>
                        <slot :item='item'>{{item.name}}</slot>
                    </li>
                </div>
            `
        });
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: 'apple'
                }, {
                    id: 2,
                    name: 'orange'
                }, {
                    id: 3,
                    name: 'banana'
                }]
            }
        });
    </script>

前后端交互模式

1. 说出来什么事前后端交互
2. promise用法

前后端的交互模式：通过浏览器条用后台接口，拿到数据再去做渲染；
可以返回一个完整的html页面
接口调用的方式：
1.原生ajax
2.基于jqueryajax
3.fetch
4.axios
URL格式
schema：协议：http https
host ：域名或者ip地址
port：端口
path：路径
query：查询参数
fragment：锚点（Hash）用于定位页面的某个位置
*

Restful形式URL

1. GET 查询 http://www.hello.com/books
2. POST 添加 http://www.hello.com/books
3. PUT 修改 http://www.hello.com/books/123
4. DELETE 删除
5. 可以直接在地址中通过/的方式传递参数

Promise用法

es6引入的新语法，专门用于处理异步编程
Promise是一个对象，可以获取异步操作的消息；
是解决异步编程的一种方案；解决回调地狱
好处：1.可以避免多层异步嵌套的问题
2.Promise提供了简洁的APl，使控制异步编程更加容易
异步编程：1.定时任务 2.ajax 3.事件函数
使用原生ajax多次异步调用分析：

1. 多次调用异步结果的顺序是不确定的
   2.异步调用结果如果存在依赖，需要嵌套，会形成回调地狱

 <script>
        //实例化Promise对象；构造函数中传递函数，函数用于处理异步
        //函数体内实现异步任务，
        //把异步的请求封装到Promise里面
        //resovle输出正确的和reject输出错误的
        var p = new Promise(function(resolve, reject) {
                setTimeout(function() {
                    //用于实现异步任务
                    var flag = false;
                    if (flag) {
                        //成功的
                        resolve('hello')
                    } else {
                        //失败
                        reject('出错了')
                    }
                }, 100)
            })
            //通过.then输出
        p.then(function(data) { //正常的情况
            console.log(data);

        }, function(info) { //错误的情况
            console.log(info);

        })
    </script>

基于Promise发送ajax解决地狱回调

//.then返回值：1.返回Promise实例对象；回调用下一个then就可以得到上一个异步处理的结果
//2.返回普通值回直接传到给下一个.then；内部会把这个普通值处理为Promise值，输出

 <script>
        function queryData(url) {
            var p = new Promise(function(resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState !== 4) return
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //处理正常情况
                        resolve(xhr.responseText)
                    } else {
                        //错误情况
                        reject('服务器错误')
                    }
                }
                xhr.open('get', url);
                xhr.send(null);
            })
            return p;
        }
        // 发送多个ajax请求并且保证顺序
        queryData('http://localhost:3000/data')
            .then(function(data) {
                console.log(data)
                return queryData('http://localhost:3000/data1');
            })
            .then(function(data) {
                console.log(data);
                return queryData('http://localhost:3000/data2');
            })
            .then(function(data) {
                console.log(data)
            });
    </script>

Promise常用API-实例方法

<script>
        //p.then()得到异步任务的正确结果
        //p.catch()获取异常信息；
        //p.finally()不管成功和失败都会触发
        function foo() {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                    // resolve(123);
                    reject('error');
                }, 100);
            })
        }
        foo()
            .then(function(data) {//得到异步成功的结果
                console.log(data);
            })
            .catch(function(data) {//处理错误信息
                console.log(data)
            })
            .finally(function() {//不管成功和失败都会触发
                console.log('finished')
            });
            //.then可以输出成功和失败
             .then(function(data) {//得到异步成功的结果
                console.log(data);
            },function(info){//输出错误信息
            	console.log(info)
            })
    </script>

Promise常用API-对象方法

//all都是属于对象方法；
//prototype属性方法
//Promise.all();并发处理多个任务，所有的任务完成后，才会得到所有结果
//Promise.race();并发处理多个任务只会得到最快返回的异步任务一个结果；

 <script>
        // console.dir(Promise);
        function queryData(url) {
            return new Promise(function(resolve, reject) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState != 4) return;
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 处理正常的情况
                        resolve(xhr.responseText);
                    } else {
                        // 处理异常情况
                        reject('服务器错误');
                    }
                };
                xhr.open('get', url);
                xhr.send(null);
            });
        }
        var p1 = queryData('http://localhost:3000/a1');
        var p2 = queryData('http://localhost:3000/a2');
        var p3 = queryData('http://localhost:3000/a3');
        Promise.all([p1, p2, p3]).then(function(result) { //结果也是一个数组
            console.log(result);
        })
        Promise.race([p1, p2, p3]).then(function(result) { //结果也是一个数组
            console.log(result);
        })
    </script>

Fetch API 基本用法

Fetch是浏览器自带的
tetx()将返回体处理成字符串类型
json()返回结果和jsonresponseText一样

 <script>
        //Fetch基于Promise上使用的；传统ajax的升级版；
        //Fetch更加简单的数据获取方式，功能更加强大；
        fetch('http://localhost:3000/fdata').then(function(data) {
            //data不能直接拿到数据；
            //text()属于fetchAPL的一部分，返回的是promise实例对象，用于获取后台返回的数据
            return data.text();
        }).then(function(data) {
            console.log(data);
        })
    </script>

Fetch API 调用接口传递参数

<script>
        1.get请求传递参数
        fetch('http://localhost:3000/books?id=123', {
            method: 'get' //传递参数的类型
        }).then(function(data) {
            return data.text()
        }).then(function(data) {
            console.log(data);
        })
        2.GET参数传递-restful形式的URL
        fetch('http://localhost:3000/books/456', {
            method: 'get' //传递参数的类型
        }).then(function(data) {
            return data.text()
        }).then(function(data) {
            console.log(data);
        })
        3. DELETE请求方式参数传递
        fetch('http://localhost:3000/books/789', {
            method: 'delete' //传递参数的类型
        }).then(function(data) {
            return data.text()
        }).then(function(data) {
            console.log(data);
        })
        4.POST请求传参
        fetch('http://localhost:3000/books', {
            method: 'post', //传递参数的类型
            body: 'uname=lisi&pwd=123', //在body里面传递参数
            headers: { //设置请求头
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(data) {
            return data.text()
        }).then(function(data) {
            console.log(data);
        })
        5.POST请求传参
        fetch('http://localhost:3000/books', {
            method: 'post', //传递参数的类型
            body: JSON.stringify({
                uname: '张三',
                pwd: '456'
            }), //在body里面传递参数
            headers: { //设置请求头
                'Content-Type': 'application/json'
            }
        }).then(function(data) {
            return data.text()
        }).then(function(data) {
            console.log(data);
        })
        6.PUT请求传参
        fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });
    </script>

axios的基本使用

//注意data属性是固定的用法，用户获取后台的实际数据；
//axios的基本使用；专门调用接口的第三方库，基于promise用户浏览器和node.js的http客户端；
//1.支持浏览器和node
//2.基于 promise
//3.拦截器

 <script src="js/axios.js"></script>
    <script>
      
        axios.get('http://localhost:3000/adata').then(function(ret) {
           
            // console.log(ret);//输出时一个对象，所有的内容都在data里面
            console.log(ret.data);
        })
    </script>