vue-resource

vue-resource使用简介

由 我怕爱的太早我们不能终老 提交于 2019-11-28 01:16:15
什么是vue-resource？ vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，也就是说，jQuery中ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。此外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。 vue-resource是不是已经不那么陌生了，接下来我们就来看看vue-resouce的具体使用方法： // 因为vue-resource依赖于vue.js，所以要先引入vue.js <script src="js/vue.js"></script> <script src="js/vue-resource.js"></script> 引入插件以后，我们再来看看它怎么使用： // 全局引用 Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); /

Vue.js v-show in a list

由 放肆的年华 提交于 2019-11-28 01:09:00
问题 I'm sure this one's gonna be extremely easy for you guys. I am trying to make a simple list of posts with the post titles always visible, and when you click a specific post in the list, you get the post's body. I used v-show for that. However, when I click a specific post, the bodies of all of the posts appear, instead of just the one that I clicked. Here's the template: <template> <div class="container"> <h1>My Posts</h1> <ul class="list-group"> <li class="list-group-item" v-for="post in

vue-resource

由 安稳与你 提交于 2019-11-27 23:55:11
主要内容： 模拟服务端返回数据（需要准备一个data.json的文件来模拟返回的数据 再就是写接口来请求数据） 用vue-resourc e向服务器请求数据 （需要安装vue-resource 再就是在main.js中导入并使用 最后就是在相应的vue组件中接收返回的数据） 下边进行详细的说明 （PS：自己也是边学边记录 内容不免有些粗糙~~） 首先，先介绍一下什么是vue-resource，简单来说，它就 是vue的一个与服务器端通信的HTTP插件，用来从服务器端请求数据。 模拟服务端返回数据 我们用vue-cli创建的项目中，已经给我们提供了模拟服务器端返回数据的地方和接口。如下图所示，在项目目录的build目录下，有一个dev-server.js，在这个文件中，我们就可以来做一些模拟数据的工作。 1、准备data.json文件（模拟返回数据所使用的） 在项目根目录下，新建一个data.json。这个文件里的内容就是我们要模拟的服务端返回的数据。 他是一个大的json，里边相应的有各个字段。（好像这是句废话，啊哈哈~~） data.json格式如下：（我模拟的要简单） { "user": { "name": "尼古拉斯赵四", "area": "华东区", "identity":"管理员" }, "data_center": { /*暂时是空的没有内容*/ } } 写接口

Vue的参数请求与传递

由 非 Y 不嫁゛ 提交于 2019-11-27 18:59:33
Vue不同模板之间的参数传递 页面路由带参数的跳转： 参数接收： Vue向服务器请求资源的两种方式 VUE-RESOURCE 1.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界面。 2.vue-resource特点： （1）体积小 vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 （2）支持主流的浏览器 和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。 （3）支持Promise API和URI Templates Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。 URI

How to use vue-resource ($http) and vue-router ($route) in a vuex store?

由 耗尽温柔 提交于 2019-11-27 18:01:05
问题 Before I was getting movie detail from the component's script. The function first check whether the movie ID of the store is same as of the route's param movie ID. If its same then don't get the movie from the server API, or else get the movie from the server API. It was working fine. But now I am trying to get the movie details from the store's mutation. However I am getting error Uncaught TypeError: Cannot read property '$route' of undefined How to use vue-router ($route) to access the

Vue.js - How to properly watch for nested data

由 孤街醉人 提交于 2019-11-27 05:49:45
I'm trying to understand how to properly watch for some prop variation. I have a parent component (.vue files) that receive data from an ajax call, put the data inside an object and use it to render some child component through a v-for directive, below a simplification of my implementation: <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ... then inside <script> tag: data(){ return { players: {} }, created(){ let self = this; this.$http.get('../serv/config/player.php').then((response) => { let pls = response

Is there any way to 'watch' for localstorage in Vuejs?

由 淺唱寂寞╮ 提交于 2019-11-27 03:12:47
问题 I'm attempting to watch for localstorage: Template: <p>token - {{token}}</p> Script: computed: { token() { return localStorage.getItem('token'); } } But it doesn't change, when token changes. Only after refreshing the page. Is there a way to solve this without using Vuex or state management? 回答1: Sure thing! The best practice in my opinion is to use the getter / setter syntax to wrap the localstorage in. Here is a working example: HTML: <div id="app"> {{token}} <button @click="token++"> + <

CORS Post Request Fails

由 余生长醉 提交于 2019-11-26 21:53:26
问题 I built an API with the SLIM Micro-Framework. I setup some middleware that adds the CORS headers using the following code. class Cors{ public function __invoke(Request $request, Response $response, $next){ $response = $next($request, $response); return $response ->withHeader('Access-Control-Allow-Origin', 'http://mysite') ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization') ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT,

vue项目模拟后台数据

由 谁说胖子不能爱 提交于 2019-11-26 18:21:24
这次我们来模拟一些后台数据，然后去请求它并且将其渲染到界面上。关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔 《Vue开发环境搭建及热更新》 一、数据建立 我这里为了演示这个过程所以自己编写了这个data.json文件 1 { 2 "school":{ 3 "students":[ 4 { 5 "name":"方毅", 6 "sex":"男", 7 "age":21, 8 "class":1, 9 "Chinese":100, 10 "Math":90, 11 "English":88, 12 "TotalPoint":278 13 }, 14 { 15 "name":"黎倩", 16 "sex":"女", 17 "age":20, 18 "class":1, 19 "Chinese":98, 20 "Math":80, 21 "English":75, 22 "TotalPoint":253 23 }, 24 { 25 "name":"陈二", 26 "sex":"男", 27 "age":22, 28 "class":2, 29 "Chinese":70, 30 "Math":60, 31 "English":50, 32 "TotalPoint":180 33 }, 34 { 35 "name":"邓珊", 36 "sex":"女", 37 "age":22, 38

vue mock数据（模拟后台）

由 此生再无相见时 提交于 2019-11-26 18:20:47
本文转载自： https://blog.csdn.net/benben513624/article/details/78562529 vue实现ajax获取后台数据是通过vue-resource，首先通过npm安装vue-resource npm install vue-resource --save 安装完成以后，把vue-resource引入到main.js文件中 src/main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import VueResource from 'vue-resource' import Layout from './components/layout' Vue.use(VueResource); /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<Layout/>',
订阅 vue-resource