详解vue 中使用 AJAX获取数据的方法


Posted in Javascript onJanuary 18, 2017

在VUE开发时,数据可以使用jquery和vue-resource来获取数据。在获取数据时,一定需要给一个数据初始值。

看下例:

<script type="text/javascript">
  
   new Vue({
      el:'#app',
      data:{data:""},
      created:function(){
        var url="json.jsp";
        var _self=this;
        $.get(url,function(data){
          _self.data=eval("(" + data +")");
        })
        /*
        this.$http.get(url).then(function(data){
          var json=data.body;
          this.data=eval("(" + json +")");
        },function(response){
          console.info(response);
        })*/
      }
     });
  </script>

这里必须设置 vue的data的初始数据,即使此时数据为空。

在使用ajax获取数据时,使用vue-resource 更加合适。

使用vue-resource代码如下:

<script type="text/javascript">
  
   new Vue({
      el:'#app',
      data:{data:""},
      created:function(){
        var url="json.jsp";
      
        this.$http.get(url).then(function(data){
          var json=data.body;
          this.data=eval("(" + json +")");
        },function(response){
          console.info(response);
        })
      }
     });
  </script>

这里我们看到设置VUE实例数据时,直接使用 this.data 就可以设置vue的数据了。

使用jquery的时候,代码如下:

<script type="text/javascript">
   new Vue({
      el:'#app',
      data:{data:""},
      beforeCreate:function(){
        var url="json.jsp";
        var _self=this;
        $.get(url,function(data){
          _self.data=eval("(" + data +")");
        })
      }
     });
  </script>

这里在需要先将 this 赋值给 _self ,让后在jquery的get方法中进行使用,这样使用起来没有vue-resource方便。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 #Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 #Javascript
jQuery中的一些小技巧
Jan 18 #Javascript
AngularJS Select(选择框)使用详解
Jan 18 #Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 #Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 #Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 #Javascript
You might like
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
js星星评分效果
2014/07/24 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python笔记之工厂模式
2019/11/20 Python
Python各种扩展名区别点整理
2020/02/27 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
保安自我鉴定范文
2013/12/08 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
实习协议书范本
2014/09/25 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
新教师2015年度工作总结
2015/07/22 职场文书