vue-resource

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求 之前的学习中，如何发起数据请求？原生、jQuery，需要操作DOM 常见的数据请求类型？ get post jsonp 测试的URL请求资源地址： get请求地址： http://vue.studyit.io/api/getlunbo post请求地址： http://vue.studyit.io/api/post jsonp请求地址： http://vue.studyit.io/api/jsonp JSONP的实现原理 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全； 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）； 具体实现过程： 先在客户端定义一个回调方法，预定义对数据的操作； 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口； 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行； 客户端拿到服务器返回的字符串之后

参考文章： https://www.cnblogs.com/Juphy/p/7073027.html 、 https://www.cnblogs.com/chenhuichao/p/8308993.html Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。 vue-resource特点 vue-resource插件具有以下特点： 1、体积小 vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 2、支持主流的浏览器 和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。 3、支持Promise API和URI Templates

一、解释 1、安装与引用 　　NPM： npm install vue-resource --save-dev 　　除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求 　　 /*引入Vue框架*/ import Vue from 'vue' /*引入资源请求插件*/ import VueResource from 'vue-resource' /*使用VueResource插件*/ Vue.use(VueResource) 2、使用语法 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body：传入服务器的参数], [options：提交格式类型]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); this.$http.post('/someUrl', [body], [options]).then(successCallback,

vue-resource <script src="./lib/vue-2.4.0.js"></script> <!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意 --> <!-- this.$http.jsonp --> <script src="./lib/vue-resource-1.3.4.js"></script> <div id="app"> <input type="button" value="get请求" @click="getInfo"> <input type="button" value="post请求" @click="postInfo"> <input type="button" value="jsonp请求" @click="jsonpInfo"> </div> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: { getInfo() { // 发起get请求 // 当发起get请求之后， 通过 .then 来设置成功的回调函数 this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) { // 通过 result.body

I'm using Vuex to show a list of users from 'store.js'. That js file has array like this. var store = new Vuex.Store({ state: { customers: [ { id: '1', name: 'user 1',}, ] } }) I want to insert a new set of values to the same array { id: '1', name: 'user 1',} The above values are obtained from a URL (vue-resource). Below is the code to push the obtained data to the array. However, the data is not inserting mounted: function() { this.$http.get('http://localhost/facebook-login/api/get_customers.php') .then(response => { return response.data; }) .then(data => { store.state.customers.push(data) //

I am trying to set up a Vuejs fronted application (vue-cli webpack template) to sit on top of my Laravel API. I am able to get a successful response from the API with vue-resource by providing the correct auth token, for example: methods: { getUser () { this.$http.get('http://localhost:8000/api/user', { headers: { 'Authorization': 'Bearer eyJ0e.....etc', 'Accept': 'application/json' } }).then((response) => { this.name = response.data.name }); }, However, I am now trying to set up interceptors so that the user's auth token will automatically be added for each request. Based on the vue-resource