vue之数据交互实例代码


Posted in Javascript onJune 16, 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 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
Aug 11 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 #Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
基于JS实现网页中的选项卡(两种方法)
Jun 16 #Javascript
angular ng-click防止重复提交实例
Jun 16 #Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 #Javascript
vue实现全选、反选功能
Nov 17 #Javascript
You might like
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python splitlines使用技巧
2008/09/06 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Django如何批量创建Model
2020/09/01 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
医学专业五年以上个人求职信
2013/12/03 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
党员民主评议总结
2014/10/20 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书