一、发送AJAX请求

1.简介

    vue 本身不支持发送AJAX请求，需要使用vue-resource，axios 等插件实现，axios是一个基于Prcmisce的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐使用。同时不再对vue-resource进行更新和维护。
    参考：GitHub上搜索axios ，查看API文档

2，使用axios发送ajax请求

2.1安装axios并引入

    nmp install axios -S
    也可以直接下载axios.min.js文件

2.1基本用法

      axios([options])
      axios.get(url,options);
          传参的方式：
                1、通过url来传参数
                 2、通过params传参
      axios.post(url,data,[options])
                axios默认发送数据时，数据格式是Request Payload，并非我们常用的From Data 格式，所以参数必须要以键值对形式传递，不能以json的方式去传参
                传参方法：
                      1. 自己拼接键值对。
                       2. 使用transformRequest,在请求发送前将请求数据进行转换
                       3.如果使用模块化开发，可以使用qs querystring
    axios本身并不支持发送跨域的请求，没有提供相应的API,所以只能使用第三方的库。

3.使用vue-rescoure 发送跨域请求

3.1 安装vue-resource并引入

    npm install vue-resource -save

3.2 基本用法

       使用this.$http发送请求
        get(url, [options])
        head(url, [options])
        delete(url, [options])
        jsonp(url, [options])
        post(url, [body], [options])
        put(url, [body], [options])
        patch(url, [body], [options])

        <!DOCTYPE html>
        <html lang="en">
        <head>
    <meta charset="UTF-8">
      <title>Document</title>
      <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5">                    </script>

<script type="text/javascript">
window.onload = function(){
    new Vue({
        el:'#itany',
        data:{
            user:{

            },
            uid:''
        },
        methods:{
            sendJSONP(){
                
                this.$http.jsonp("https://sug.so.360.cn/suggest",{
                    params:{
                        word:'a'
                    }
                }).then(resp => {
                    console.log(resp.data.s);
                })
            },
            sendJSONP_one(){
                this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
                    params:{
                        wd:'a'
                    },
                    jsonp:"cb"//百度使用的jsop参数名为cb,所以需要修改
                }).then(resp => {
                    console.log(resp.data);
                })
            }
        }
    })
}
</script>
  </head>
  <body>
<div id="itany">
    <button @click="sendJSONP">360发送JSONP请求</button>
    <button @click="sendJSONP_one">百度发送JSONP请求                </button>
</div>

</body>
</html>