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 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php读取xml实例代码
2010/01/28 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
简介Django中内置的一些中间件
2015/07/24 Python
python实现的汉诺塔算法示例
2019/10/23 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
物理研修随笔感言
2014/02/14 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
大学生自荐书范文
2015/03/05 职场文书
小学少先队活动总结
2015/05/08 职场文书