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 相关文章推荐
农历与西历对照
Sep 06 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
微信小程序canvas实现签名功能
Jan 19 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
我的群发邮件程序
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
js 图片轮播(5张图片)
2008/12/30 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
python僵尸进程产生的原因
2017/07/21 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
Python读取yaml文件的详细教程
2020/07/21 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
施工安全协议书
2013/12/11 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
中央空调节能方案
2014/06/15 职场文书
车辆委托书范本
2014/10/05 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
浅谈python数据类型及其操作
2021/05/25 Python