今天又是充满希望的一天,就跟着案例教程做了一个vue的小项目,但是虽然说很简单,但是在学习的过程中,对于没有多少js的基础的人来说
是比较困难的,项目的关键的地方就是用了vue的三个进行交互的方法,get,post,jsonp
--语法
引入vue交互模块,resource.js,然后直接在方法中this.$http.get(post(jsonp)) 第一个参数是url路径,第二个参数是数据,然后通过then.funcition,分别是成功返回的方法,和失败返回的方法
--需要特别提示一点的就是在post的提交的时候需要把emulateJSON:true,加入到第三个参数中并且用{}包裹起来
--在jsonp跨域中,callback的默认名字就是callback,但是在百度中,默认的名字为cb,所以在调用接口的时候,需要声明callback的名字为cb,所以要在第三个参数中声明jsonp:'cb',这样我们就可以正常调用了。

po一下代码,代码的功能就是简单的百度搜索功能,输入东西按回车也会直接跳到一个百度搜素结果页中,调用了windows.open配合百度的搜索接口,把
参数换成输入框中的数据即可。

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>百度下拉菜单</title>
<script src="bootstrap.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>

</head>
<style>

.grey{
    background: #ccc;
}

</style>
<body>

<div id="box">
    <input type="text" class="input-group" v-model="text" @keyup="get($event)" @keydown.down="down()" @keydown.up.prevent="up()" @keydown.enter="enter()">
    <ul>
        <li class="list-group" v-for="(li,$index) in mydata" :class="{grey:$index==now}">{{li}}</li>
    </ul>
    <p v-show="mydata.length==0">暂无数据。。。</p>
</div>

<script>

new Vue({
    el:'#box',
    data:function () {
        return{
            text:'',
            mydata:[],
            now:'-1'
        }
    },
    methods:{
        get:function (ev) {
            if(ev.keyCode==38 || ev.keyCode==40)return;
            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                wd:this.text
            },{
               jsonp:'cb'
            }).then(function (code) {
                this.mydata=code.data.s;
            },function (code) {
                //失败的返回结果
                alert(code.data);
            })
        },
        down:function () {
            this.now++;
            if(this.now==this.mydata.length){
                this.now=-1
            };
            this.text=this.mydata[this.now]
        },
        up:function () {
            this.now--;
            if(this.now==-2){
                this.now=this.mydata.length-1;
            };
            this.text=this.mydata[this.now]
        },
        enter:function () {
            window.open('https://www.baidu.com/s?wd='+this.text);
            this.text=''
        }
    }
})

</script>
</body>
</html>

u=1436948145,4270509323&fm=200&gp=0.jpg

标签: none

添加新评论