1.this.$http.get()方法
2.this.$http.post()方法
3.this.$http.jsonp()方法
(vue仿百度搜索)
在输入框中输入a, 然后在百度f12 ==> network ==> 复制js
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1440_25548_21098_20719&req=2&csor=1&cb=jQuery1102032174500415831986_1516022014624&_=1516022014630
整理下
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
HTML
<div id="app">
<!-- v-model绑定数据, @keyup事件 -->
<input type="text" v-model="keyword" @keyup="get($event)" @keydown.down.prevent="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<!-- v-for循环数据, v-bind:class="{gray:index==now}, 当前下标为true时显示灰色" -->
<li v-for="(value, index) in myData" v-bind:class="{gray:index==now}">{{value}}</li>
</ul>
<!-- 判断length当数据为空时 -->
<p v-show="myData.length==0">暂无数据...</p>
</div>
VUE.JS
new Vue({
el: "#app",
data: {
myData:[], // 循环数据
keyword:"", // 输入文本值
now: -1 // 索引
},
methods:{
// jshow({q:"a",p:false,s:["爱奇艺","阿里云","阿里巴巴","安居客","阿里巴巴批发网","爱情公寓","安卓模拟器","acfun","apple","暗黑3"]});
get: function(ev){
if(ev.keyCode == 38 || ev.keyCode == 40){
return false;
}
if(ev.keyCode == 13){
window.open("https://www.baidu.com/s?wd=" + this.keyword);
}
// jsonp获取百度的搜索关键字
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.keyword + "",{
jsonp:"cb" // callback函数名
}).then(function(res){
this.myData = res.data.s; // 存入搜索数据
}, function(){
console.log(res.status)
})
},
// 键盘下拉事件
changeDown: function(){
this.now++;
if(this.now == this.myData.length){
this.now = -1;
}
this.keyword = this.myData[this.now]; // 赋值是文本框
},
// 键盘上拉事件
changeUp: function(){
this.now--;
if(this.now == -1){
this.now = this.myData.length-1;
}
this.keyword = this.myData[this.now]; // 赋值是文本框
},
}
})