03-Vue数据请求

时间:2020-03-20 Poki-Q 人气:3
1. vue-resource

vue-resource jsonp请求
<body>
    <div id="app">
        <!-- 
            v-model 监听表单域，把表单域的值传给它的属性值，
            属性值再传给data里面的数据（且它的属性值必须存在data对象里面）
            其它地方就可以调用由表单域传到data里面的数据了
            .lazy 失去焦点后更新
        -->
        <input type="text" v-model.lazy="good" @keyup.enter="jsonp">
        <button @click="jsonp">http请求</button>
        <p v-for="res in result">{{res[0]}}</p>
    </div>

    <script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
    <script>
        // 请求的接口
        // http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb
        var vm = new Vue({
            el:"#app",
            data:{
                good:"",
                result:[]
            },
            methods:{
                jsonp(){
                    // jsonp('请求地址',{配置})
                    this.$http.jsonp('http://suggest.taobao.com/sug', {
                        // 携带的参数
                        params:{
                            code:"utf-8",
                            q:this.good
                        }
                    }).then(res => {
                        // res.data 返回的数据
                        this.result = res.data.result
                    })
                }
            }
        })

    </script>
</body>
加载全部内容