Vue2.0插件之二:使用vue-resource插件
2018-02-01 13:53
696 查看
本文只要介绍vue-resource基本用法与常见的问题
1、创建引用文件:
用ide打开项目文件,在src目录下创建文件夹resource,后在文件夹内创建index.js。如图:
2.编写引用的相关代码:
step1: resource下的index.js:
step2: src下的main.js,代码引入已经引用好的resource文件
tip:如果代码没有反应,请用cmd进入到项目目录,$cnpm run dev。
step3: App.vue页面的发起的数据请求,案例是mock,调用本地的data.json。
tip: 此处的‘api、seller’为本地自己配置的data.json文件的数据,可以直接替换成url路径。成功调用vue-resource,服务器会返回data数据包,如图,在谷歌按F12(开发者模式下):
只要实现该效果即可。不过出于安全性的考量,建议大家使用vue-axios的方式调用数据。
一、vue-resource插件的安装
使用 npm:$ cnpm install vue-resource
二、vue-resource插件的引用
出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件:
用ide打开项目文件,在src目录下创建文件夹resource,后在文件夹内创建index.js。如图:
2.编写引用的相关代码:
step1: resource下的index.js:
import Vue from 'vue'; /*引入资源请求插件*/ import VueResource from 'vue-resource'; /*使用VueResource插件*/ Vue.use(VueResource); export default({ });
step2: src下的main.js,代码引入已经引用好的resource文件
import Vue from 'vue'; import App from './App'; import router from './router'; import resource from './resource';//通过import引入 Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, resource,//通过import引入,然后在这里调用 components: { App }, template: '<App/>' });
tip:如果代码没有反应,请用cmd进入到项目目录,$cnpm run dev。
step3: App.vue页面的发起的数据请求,案例是mock,调用本地的data.json。
export default { name: 'App', data() { return { itemList: [], } }, mounted() { this.getAjax(); }, methods:{ getAjax:function () { var successCallback = (response) => { console.log('服务器请求成功了') console.log(response.data) } var errorCallback = (response) => { console.log('服务器请求出错了') } this.$http.get('api/seller').then(successCallback,errorCallback); }, } }
tip: 此处的‘api、seller’为本地自己配置的data.json文件的数据,可以直接替换成url路径。成功调用vue-resource,服务器会返回data数据包,如图,在谷歌按F12(开发者模式下):
只要实现该效果即可。不过出于安全性的考量,建议大家使用vue-axios的方式调用数据。
相关文章推荐
- vue-resource和vue-async-data两个插件的使用
- vue-resource插件使用
- vue-resource插件使用
- 《转》vue更新到2.0之后vue-resource不在更新,axios的使用
- vue-resource插件使用
- 关于使用vue 的resource插件用post请求数据时一直是options的解决方案
- vue.js 2.0系列之 插件的使用
- Vue2.0插件之一:使用vue-router插件
- Spring2.0简明手册(系列之二 Resource的配置及使用)
- vue-resource插件使用
- vue.js插件使用(01) vue-resource
- vue-resource插件使用
- vue插件vue-resource的使用笔记(小结)
- vue-resource插件使用
- vue-resource插件使用
- Vue2.0 使用vue-resource 模拟网络请求加载本地数据
- vue-resource插件使用
- Vue2.0插件之三:使用vue-axios插件
- Vue 2.0 使用图片懒加载插件
- ASP.NET 2.0使用Web Part创建应用程序之二