vue交互

1）如果vue想做交互，本身的框架是不支持的，需要引入vue-resurce库
交互方式：get、post、jsonp

1、get方式methods: {    get: function () {

        /*get.php是在当前同级目录下的*/
        /*get给服务发送数据，需要在服务器环境下才能看到结果即通过ftp上传至服务器*/
        this.$http.get('get.php',{
             a:1,
             b:2
        }).then(function (res) {
            console.log("获取数据成功！");
            /*获取状态码：status，不是statusCode*/
            console.log(res.status);//200
            alert("获取到了a.txt中的内容："+res.data);
        }, function (res) {
            alert("获取数据失败！");
            console.log(res.status);//404
        });
    }
}
2、post方式

methods: {
    get: function () {
        /*get.php是在当前同级目录下的*/
        /*post给服务发送数据，需要在服务器环境下才能看到结果即通过ftp上传至服务器*/
        this.$http.post('post.php',{
             a:1,
             b:2
        },{
            emulateJSON:true
        }).then(function (res) {
            console.log("获取数据成功！");
            /*获取状态码：status，不是statusCode*/
            console.log(res.status);//200
            alert("获取到了a.txt中的内容："+res.data);
        }, function (res) {
            alert("获取数据失败！");
            console.log(res.status);//404
        });
    }
}

vue2.0之后不能使用$index。
　　demo:jsonp方式获取百度搜索下拉列表当前选中项颜色改变，其次键盘上下方向键可以选择

<style>
    .red {
        color: red;
    }
</style>

<script>
    window.onload = function () {
        new Vue({
            el: '#box',
            data: {
                myData: [],
                val: '',
                now: -1
            },
            methods: {
                get: function (ev) {
                    if(ev.keyCode==38 || ev.keyCode==40)return;
 
                    if(ev.keyCode==13){
                        window.open('https://www.baidu.com/s?wd='+this.val);
                        this.val='';
                    }
                    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
                        wd: this.val
                    }, {
                        jsonp: 'cb'
                    }).then(function (res) {
                        this.myData = res.data.s;
                    }, function () {
 
                    });
                },
                changeDown: function () {
                    this.now++;
                    if (this.now == this.myData.length){
                        this.now = -1;
                    }
                    this.val=this.myData[this.now];
                },
                changeUp: function () {
                    this.now--;
                    if (this.now == -2){
                        this.now = this.myData.length - 1;
                    }
                    this.val=this.myData[this.now];
                }
            }
        });
    };
</script>

<div id="box">
    <input type="text" v-model="val" @keyup="get($event)" @keydown.down="changeDown()"
           @keydown.up.prevent="changeUp()">
    <ul>
        <li v-for="(value,index) in myData" :class="{red:index==now}">
            {{value}}
        </li>
    </ul>
    <p v-show="myData.length==0">暂无数据...</p>
</div>