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每次Title显示不同的名言
Sep 25 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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 正则表达式小结
2009/08/31 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
three.js实现圆柱体
2018/12/30 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
详解python3中zipfile模块用法
2018/06/18 Python
Python的argparse库使用详解
2018/10/09 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
台湾森森购物网:U-mall
2017/10/16 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
在职研究生自我鉴定
2013/10/16 职场文书
校园安全教育广播稿
2014/02/17 职场文书
西式婚礼主持词
2014/03/13 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers