在vue中读取本地Json文件的方法


Posted in Javascript onSeptember 06, 2018

其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践。

使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件。

json文件应该是必须放在static目录下

在vue中读取本地Json文件的方法

然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件。

在main.js文件中添加:

import VueResource from 'vue-resource'

然后:

Vue.use(VueResource)

最后读取json数据:

this.$http.get('static/map/china.json').then(res => {
 console.log("json数据为:" + res.body)//此处的res对象包含了json的文件信息和数据,我们需要的json数据存在于body属性中
})

这样就能读取json数据了!

以上这篇在vue中读取本地Json文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中length属性的探索
Jul 31 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
js使用formData实现批量上传
Mar 27 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 #Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 #Javascript
vue template中slot-scope/scope的使用方法
Sep 06 #Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 #Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 #Javascript
vue兄弟组件传递数据的实例
Sep 06 #Javascript
You might like
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php实现json编码的方法
2015/07/30 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
python颜色随机生成器的实例代码
2020/01/10 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
ktv好的活动方案
2014/08/15 职场文书
小学生校园广播稿
2014/09/28 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
教师个人年终总结
2015/02/11 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
2015中学教学工作总结
2015/07/22 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
2016新党章学习心得体会
2016/01/15 职场文书