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

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