版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zengxiaosen/article/details/80156053
vue本身不支持发送ajax请求，需要使用vue-resource,axios等插件实现
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护
安装axios cnpm install axios -S
基本用法
axios([options])
axios.get(url,[options]);
传参方式:
1.通过url传参
2.通过params方式
axios.post(url,data,[options]);
axios默认发送数据时，数据格式是Request.Payload,并非我们常用的Form
Data格式：所以参数必须要以键值对形式传递，不能以json形式传参
传参方式：
1.自己拼接为键值对
2.使用transformRequest，在请求发送前将请求数据进行转换
3.如果使用模块化开发，可以使用qs querystring模块进行转换
axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库
使用vue-resource发送跨域请求
cnpm install vue-resource -S
jsonp仿照百度首页搜索框实现：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>v-model</title>
<script src="js/vue.js"></script>
<script src="js/vue-resource.min.js"></script>
<script>
window.onload=function(){
var vm = new Vue({
el:'#itany',
data:{//存储数据
keyword:'',
myData:[],
now:-1//当前选中项的索引
},
methods:{
getData(e){
//如果按方向键上和下则不发请求
if(e.keyCode=38||e.keyCode=40){
return;
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
params:{
wd:this.keyword;
},
jsonp:'cb' //百度使用的jsonp参数名为cb，所以需要修改
}).then(resp => {
this.myData=resp.data.s;
});
},
changeDown(){
this.now++;
this.keyword=this.myData[this.now];
if(this.now==this.myData.length){
this.now=-1;
}
},
changeUp(){
this.now--;
this.keyword=this.myData[this.now];
if(this.now==-2){
this.now=this.myData.length-1;
}
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<input type="text" v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown" @keydown.up.prevent="changeUp"/>
<ul>
<li v-for="(value,index) in myData" :class="{current:index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据....</p>
</div>
</body>