vue引用json文件的方法小结

相信大家都有被后端数据支配过 废话不多说 直接上代码

1.解决怎么从控制台把数据 移到json文件中 直接右击复制值

var getData = require("./taifeng.json"); // 直接引入json文件
console.log(getData);

vue中引用Json文件

我们用import引用文件的时候，被引用的文件都会用export暴漏，比如js，而有一些文件不需要暴漏，如Json、img（图片）、css;

import 引用Json文件

import aaaa from "./a.json"
//aaaa是变量，可以随便命名

完成！ 没想到吧 就是这么简单 我在网上搜到的都是使用axios来进行转换 那个对于我这个脑袋不太好使的人属实不友好 所以还是这个简单高效 完美！

Vue 中引入 json 的三种方法

json的定义：

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

1.require-运行时加载

test.json文件

{
  "testData": "hello world",
  "testArray": [1,2,3,4,5,6],
  "testObj": {
    "name": "tom",
    "age": 18
  }
}
// require引用：
mounted() {
    // require引用时，放src和放statci都可以，建议放static
    const testJson = require('../../static/json/test.json');
    const {testData, testArray, testObj} = testJson;
    console.log('testData',testData);
    // ‘hello world'
    console.log('testArray',testArray);
    // [1,2,3,4,5,6]
    console.log('testObj',testObj);
}

2.import-编译时输出接口

// import 引用
// import引用时，放src和放statci都可以，建议放static
import testImportJson from '../../static/json/test.json'
// import testImportJson from './json/test.json'
export default {
  data(){
    return{
      testImportJson
    }
  },
  mounted() {
    const {testData, testArray, testObj} = this.testImportJson;
  }
}

3. 通过http请求获取

// http引用
methods:{
  async jsonHttpTest(){
    const res = await this.$http.get('http://localhost:8080/static/json/test.json');
    // 放在src中的文件都会被webpack根据依赖编译，无法作为路径使用，static中的文件才可以作为路径用
    const {testData, testArray, testObj} = res.data;
  }
},
mounted() {
  this.jsonHttpTest();
},

参考链接：https://www.jianshu.com/p/6839ffe69338

到此这篇关于vue引用json文件的文章就介绍到这了,更多相关vue引用json文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

    其实关于这个问题,网上已经可以找到些方法,不过基本上没有完整的,或者是其中有些坑,下面写一下自己的亲身实践. 使用vue读取本地json文件需要安装vue-resource插件,然后使用它的$http.get来读取json文件. json文件应该是必须放在static目录下 然后使用npm install 命令安装vue-resource,太慢的话就使用淘宝镜像安装,安装完成后先引用这个组件. 在main.js文件中添加: import VueResource from 'vue-resourc

  • Vue-cli项目获取本地json文件数据的实例

    在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件中,并且通过异步请求获取到,然后加载数据. axios.get('http://localhost:8080/datas/json') 然而在这一过程中,我的访问总是404.通过查阅,我发现,在vue-cli基础上构建的项目中,只有static目录才是vue-cli向外暴露的静态数据文件夹,我放在static下的图片可以正常访问到,我是在static同级目录新建了datas目录,将json文件放入datas目录

  • Vue加载json文件的方法简单示例

    Vue加载json文件的方法简单示例

    本文实例讲述了Vue加载json文件的方法.分享给大家供大家参考,具体如下: 一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): var appData = require('../address.json'); // 引入address.json文件 var apiRoutes = express.Router(); apiRoutes.get('/address',function (req,res) { res.jso

  • vue请求本地自己编写的json文件的方法

    1.第一步,这是目录结构 2.接下来是build/webpack.dev.conf.js文件需要配置的内容 代码: //vue配置请求本地json数据 const express = require('express') const app = express() const appData = require('../static/major_info.json')//加载本地json文件 const majorlist = appData.contents;//获取本地对应数据 const

  • Vue中请求本地JSON文件并返回数据的方法实例

    Vue中请求本地JSON文件并返回数据的方法实例

    目录 1.目录结构 2.检查一下自己是否安装了 json-server(以下截图代表安装了) 3.安装完成以后我们就可以运行自己的json文件了 4.看看浏览器里的数据呈现效果吧 5.为了保险起见,我还特地去 postman 上测试了一下(可以省略这步) 6.现在我们可以编写代码发送请求来获取数据啦 7.在控制台就可以看到我们数据请求回来了 总结 1.目录结构 直接在根目录下创建自己的JSON文件,在此我的JSON文件名为data.json 以下是我的JSON文件内容(此处是参照的黑马程序员的v

  • vue引用json文件的方法小结

    vue引用json文件的方法小结

    相信大家都有被后端数据支配过 废话不多说 直接上代码 1.解决怎么从控制台把数据 移到json文件中 直接右击复制值 var getData = require("./taifeng.json"); // 直接引入json文件 console.log(getData); vue中引用Json文件 我们用import引用文件的时候,被引用的文件都会用export暴漏,比如js,而有一些文件不需要暴漏,如Json.img(图片).css; import 引用Json文件 import aa

  • Java中使用WebUploader插件上传大文件单文件和多文件的方法小结

    Java中使用WebUploader插件上传大文件单文件和多文件的方法小结

    一.使用webuploader插件的原因说明 被现在做的项目坑了. 先说一下我的项目架构spring+struts2+mybatis+MySQL 然后呢.之前说好的按照2G上传就可以了,于是乎,用了ajaxFileUpload插件,因为之前用图片上传也是用这个,所以上传附件的时候就直接拿来用了 各种码代码,测试也测过了,2G文件上传没问题,坑来了,项目上线后,客户又要求上传4G文件,甚至还有20G以上的..纳尼,你不早说哦... 在IE11下用ajaxFileUpload.js插件上传超过4G的

  • vue引用js文件的多种方式(推荐)

    1.vue-cli webpack全局引入jquery (1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖.) (2)在webpack.base.conf.js里加入 var webpack = require("webpack") (3)在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChu

  • Python3内置模块之json编解码方法小结

    Python3内置模块之json编解码方法小结 Python3中我们利用内置模块 json 解码和编码 JSON对象 ,JSON(JavaScript Object Notation)是指定 RFC 7159(废弃了RFC 4627)和 ECMA-404是一种轻量级数据交换格式,受 JavaScript对象文字语法的启发 (虽然它不是JavaScript 1的严格子集).下面为Python对象-->JSON对象的对照关系表. dumps编码 我们利用 dumps 将Python对象编码为 JSO

  • Python3内置模块之json编解码方法小结【推荐】

    Python3中我们利用内置模块 json 解码和编码 JSON对象 ,JSON(JavaScript Object Notation)是指定 RFC 7159(废弃了RFC 4627)和 ECMA-404是一种轻量级数据交换格式,受 JavaScript对象文字语法的启发 (虽然它不是JavaScript 1的严格子集).下面为Python对象-->JSON对象的对照关系表. dumps编码 我们利用 dumps 将Python对象编码为 JSON对象 ,当然 dumps 只完成了序列化为st

  • python自动格式化json文件的方法

    本文实例讲述了python自动格式化json文件的方法.分享给大家供大家参考.具体如下: 这里主要实现将代码混乱的json文件格式化. 还有一小堆python常用算法代码 完整实例代码点击此处本站下载. class JsonFormatter: def __init__(self,intend=4,name=""): self.name=name self.intend=intend self.stack=[] self.obj=None self.source=self.get_so

  • PHP生成及获取JSON文件的方法

    PHP生成及获取JSON文件的方法

    本文实例讲述了PHP生成及获取JSON文件的方法.分享给大家供大家参考,具体如下: 首先定义一个数组,然后遍历数据表,把相应的数据放到数组中,最后通过json_encode()转化数组 json_encode() 函数的功能是将数值转换成 JSON 数据存储格式. putjson.php: <?php // 生成一个PHP数组 $data = array(); $data[0] = array('1','吴者然','onestopweb.cn'); $data[1] = array('2','何

随机推荐