vue-resource和vue-async-data两个插件的使用
vue-resource和vue-async-data两个插件的使用,看了一下文档http://cn.vuejs.org/guide/plugins.html#u5DF2_u6709_u63D2_u4EF6__26amp_3B__u5DE5_u5177
var Vue = require("vue"),
App = require("./App.vue");
var vueResource = require('vue-resource');
Vue.use(vueResource); var vm = new Vue({
el: 'body',
ready: function(){
this.$http.get('./src/test.json', {}, {
headers: {
"X-Requested-With": "XMLHttpRequest"
},
emulateJSON: true
}).then(function(response) {
var data = response.data;
this.msg = data;
}, function(response) {
// handle error
});
},
data: {
msg: "hello",
dom: "body"
}
});
简单来说, vue-resource就像jQuery里的$.ajax, 用来和后端交互数据的...你可以放在created或者ready里面运行来获取或者更新数据...
vue-async-data应该是封装了下更新数据的方法, 不过还是需要vue-resource去做交互
var Vue = require("vue"),
App = require("./App.vue");
var vueResource = require('vue-resource');
var VueAsyncData = require('vue-async-data')
Vue.use(vueResource);
Vue.use(VueAsyncData); var vm = new Vue({
el: 'body',
asyncData: function (resolve, reject) {
this.$http.get('./src/test.json', {}, {
headers: {
"X-Requested-With": "XMLHttpRequest"
},
emulateJSON: true
}).then(function(response) {
var data = response.data;
resolve({
msg: data
});
}, function(response) {
// handle error
});
},
data: {
msg: "hello",
dom: "body"
}
});
vue-resource和vue-async-data两个插件的使用的更多相关文章
- Vue学习之--------el与data的两种写法、MVVM模型、数据代理(2022/7/5)
文章目录 1.el与data的两种写法 1.1.基础知识 1.2.代码实例 1.3.页面效果 2.MVVM模型 2.1. 基础知识 2.2 .代码实例 2.3.页面效果 3.数据代理 3.1. 基础知 ...
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Vue 在beaforeCreate时获取data中的数据
众所周知,vue在beforecreate时期是获取不到data中的 数据的 但是通过一些方法可以实现在beforecreate时获取到data中的数据 暂时想到两种放发可以实现,vue在before ...
- Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Vue系列---理解Vue.nextTick使用及源码分析(五)
_ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...
- 【vue开发】vue导出Excel表格教程&demo
前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来:再比如前端在没有数据库想写些demo玩时,也是很好的选择. 第一步安装依赖包,修改配置 1.装依赖: ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
随机推荐
- Windows 7 下如何配置 java 环境变量
安装 JDK.从Oracel官方网站上下载,下载完成后安装. http://www.oracle.com/technetwork/java/javase/downloads/jdk8-download ...
- js几个经典的题目详解
直接看题目,先不要急着看答案 先自己思考,收获更多 一 var out = 25, inner = { out: 20, func: function () { var out = 30; retur ...
- 全国青少年信息学奥林匹克分区联赛(N)竞赛大纲
全国青少年信息学(计算机)奥林匹克分区联赛竞赛大纲 一.初赛内容与要求:(#表示普及组不涉及,以下同) 计算机的基本发展 诞生与发展 特点 在现代社会中的应用 计算机系统的基本组成 计算机的工作原理# ...
- 关于数据ajax请求
默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. var temp; $.ajax({ asy ...
- BZOJ3736 : [Pa2013]Karty
显然只需要考虑与障碍点相邻的格子,通过旋转坐标系,可以只考虑障碍点在格子上方的情况. 悬线法求出每个点往上的最长延伸距离$x$,以及往左往右的延伸距离$y$. 那么当$r\geq x$时,$c$至多为 ...
- setuid setgid
http://blog.csdn.net/oo__yan/article/details/7076889 在Linux系统中每个普通用户都可以更改自己的密码,这是合理的设置. 问题是:用户的信息保存在 ...
- shell脚本使用技巧3--函数调用
定义函数 function fname() { statements; } 或者 fname() { statements; } 传递参数给函数: fname arg1 arg2; ex: 函数参数定 ...
- js计算总页数
前端js取余是a%b 取除数parseInt(a / b) /** * 总页数@param(总条数,每页总条数) */ function pageTotal(rowCount, pageSize) { ...
- Java 适配器模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...
- springmvc中select可以绑定enum中所有数据的方法
public enum States { AK("AK"), AL("AL"), AR("AR"), AZ("AZ"), ...