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 相关文章推荐
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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数组实例详解
2016/06/26 PHP
cakephp常见知识点汇总
2017/02/24 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
机器学习10大经典算法详解
2017/12/07 Python
Python反转序列的方法实例分析
2018/03/21 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
EntityManager都有哪些方法
2013/11/01 面试题
元旦晚会邀请函
2014/02/01 职场文书
城管大队整治方案
2014/05/06 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
常住证明范本
2015/06/23 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
实习报告范文
2019/07/30 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
PHP获取学生成绩的方法
2021/11/17 PHP
nginx七层负载均衡配置详解
2022/07/15 Servers