在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 Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
详解tween.js的使用教程
Sep 14 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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在服务器执行exec命令失败的解决方法
2012/03/03 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
Python中 map()函数的用法详解
2018/07/10 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
对python周期性定时器的示例详解
2019/02/19 Python
python利用tkinter实现屏保
2019/07/30 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
日语专业推荐信
2013/11/12 职场文书
大学生入党思想汇报
2014/01/14 职场文书
教师求职自荐书
2014/06/14 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
mysql配置SSL证书登录的实现
2021/09/04 MySQL