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 相关文章推荐
浅说js变量
May 25 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
js获取滚动距离的方法
May 30 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
详解.vue文件解析的实现
Jun 11 Javascript
基于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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
浅析php header 跳转
2013/06/17 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
python执行使用shell命令方法分享
2017/11/08 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python高级property属性用法实例分析
2019/11/19 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
python3处理word文档实例分析
2020/12/01 Python
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
半年思想汇报
2013/12/30 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
小学班级口号
2014/06/09 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python