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 相关文章推荐
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
QT与javascript交互数据的实现
May 26 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
PHP中使用CURL获取页面title例子
2015/01/07 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
自己动手手写jQuery插件总结
2015/01/20 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
python list语法学习(带例子)
2013/11/01 Python
Python 常用string函数详解
2016/05/30 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python获取栅格点和面值的实现
2020/03/10 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
银行出纳岗位职责
2013/11/25 职场文书
员工评语大全
2014/01/19 职场文书
酒店总经理助理职责
2014/02/12 职场文书
升学宴主持词
2014/04/02 职场文书
小学新学期寄语
2014/04/02 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
婚宴邀请函
2015/01/30 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书