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 相关文章推荐
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
JavaScript网页定位详解
Jan 13 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
js实现石头剪刀布游戏
Oct 11 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
php数组指针操作详解
2017/02/14 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python算法演练_One Rule 算法(详解)
2017/05/17 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python动态文本进度条的实例代码
2020/01/22 Python
python正则表达式实例代码
2020/03/03 Python
Python通过字典映射函数实现switch
2020/11/06 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
实习生自我鉴定
2013/12/12 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
团队执行力培训心得体会
2015/08/15 职场文书