vue之数据交互实例代码


Posted in Javascript onJune 20, 2017

vue中的交互(ajax,jsonp)

vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西叫vue-resouce.js 地址:https://github.com/pagekit/vue-resource/blob/master/README.md

<meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript" src="vue-resource.js"></script>
  <style type="text/css">
  </style>
</head>
<body>
<div id="app">
  <button @click="get()">按钮</button>
</div>
  <script type="text/javascript">
  var vm=new Vue({
    el:'#app',
    data:{

    },
    methods:{
       get:function(){
            this.$http.get('a.txt').then(function(res){
              alert(res.data);
            },function(res){
              alert(res.data);
            });
          }

      }
  });
  </script>
</body>

$http 就类似于ajax 他可以this.$http.get this.$http.post还有一种就是jsonp完成跨域取数据

<div id="app">
  <button @click="get()">按钮</button>
</div>
  <script type="text/javascript">
  var vm=new Vue({
    el:'#app',
    data:{  
    },
    methods:{
       get:function(){
            this.$http.jsonp('https://sug.so.360.cn/suggest'{word:'b'}).then(function(res){
              alert(res.data.s);
            },function(res){
              alert(res.status);
            });
          }

      }
  });
  </script>
</body>

跨域取数据百度下拉例子:

<meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript" src="vue-resource.js"></script>
  <style type="text/css">
  *{ margin:0; padding: 0;}
  .bg{width: 200px; line-height:30px;}
  </style>
</head>
<body>
<div id="app">
  <input type="text" v-model="t" @keyup="get($event)" @keydown.down="changeDown()" @keyup.up.prevent="changeUp()"/>
  <ul>
    <li v-for="val in arr" class="bg">
      {{val}}
    </li>
  </ul>
  <p v-show="arr.length==0">暂无数据</p>
</div>
  <script type="text/javascript">
  var vm=new Vue({
    el:'#app',
    data:{
      arr:[],
      t:'',
      iNow:-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.t);
           this.t=''
         }
        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{wd:this.t},{jsonp:'cb'}).then(function(res){
          this.arr=res.data.s
        },function(res){
          alert('失败');
        });
      },
      changeDown:function(){
        this.iNow++;
        if(this.iNow==this.arr.length)iNow=-1;
        this.t=this.arr[this.iNow];
      },
      changeUp:function(){
        this.iNow--;
         if(this.iNow==-2)this.iNow=this.arr.length-1
        this.t=this.arr[this.iNow];
      }
      }
  });
  </script>
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
JavaScript语言对Unicode字符集的支持详解
Dec 30 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
javascript中this用法实例详解
Apr 06 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
vue组件学习教程
Sep 09 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
jquery加载单文件vue组件的方法
Jun 20 #jQuery
Angular.JS中select下拉框设置value的方法
Jun 20 #Javascript
原生js二级联动效果
Jun 20 #Javascript
angularjs下拉框空白的解决办法
Jun 20 #Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 #Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 #Javascript
详解vue-resource promise兼容性问题
Jun 20 #Javascript
You might like
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
python实现ip查询示例
2014/03/26 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
django+echart数据动态显示的例子
2019/08/12 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
新大陆软件面试题
2016/11/24 面试题
京剧自荐信
2014/01/26 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
PHP 时间处理类Carbon
2022/05/20 PHP