一、发送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>
