zoukankan      html  css  js  c++  java
  • 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>

     

    没有人能一路单纯到底,但是要记住,别忘了最初的自己!
  • 相关阅读:
    几个新角色:数据科学家、数据分析师、数据(算法)工程师
    人类投资经理再也无法击败电脑的时代终将到来了...
    Action Results in Web API 2
    Multiple actions were found that match the request in Web Api
    Routing in ASP.NET Web API
    how to create an asp.net web api project in visual studio 2017
    网站漏洞扫描工具
    How does asp.net web api work?
    asp.net web api history and how does it work?
    What is the difference between a web API and a web service?
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/10655106.html
Copyright © 2011-2022 走看看