vue-resource使用 (vue仿百度搜索)

Posted 2020-10-21 AlanTao

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];       // 赋值是文本框
        }, 
    }
})