导入axios

import Vue from "vue";
import axios from "axios";
import { get } from "http";
Vue.prototype.$ajax = axios; //将axios绑定到vue的原型上

调用axios

在vue对象内部的metho中调用

this.$ajax.get("http://localhost:3000/src/json/bannerBoxImg.json") .then(function (response) {
        self.dataList = response.data;
});

两种json文件的读取方法

第一种

[
      {
            "name":"ajax", //json文件中属性必须用双引号包含起来,不能用单引号
            "header":"/src/img/h3.png",
            "email":"@29384_shlm",
            "content":"xxx"
      },
      {
            "name":"relex",
            "header":"/src/img/h2.png",
            "email":"@gukola",
            "content":"xxx"
      },
      {
            "name":"saxphone",
            "header":"/src/img/h1.png",
            "email":"@mogwai",
            "content":"xxx"
      },
      {
            "name":"jazz",
            "header":"/src/img/h4.png",
            "email":"@wxports",
            "content":"xxx"
      }
]

读取

this.$ajax.get("http://localhost:3000/src/json/news.json",{}).then(function (response) {
      self.newsList=response.data
})

第二种

{
      "newsList": [
            {
                  "name": "ajax",
                  "header": "/src/img/h3.png",
                  "email": "@29384_shlm",
                  "content": "xxx"
            },
            {
                  "name": "relex",
                  "header": "/src/img/h2.png",
                  "email": "@gukola",
                  "content": "xxx"
            },
            {
                  "name": "saxphone",
                  "header": "/src/img/h1.png",
                  "email": "@mogwai",
                  "content": "xxx"
            },
            {
                  "name": "jazz",
                  "header": "/src/img/h4.png",
                  "email": "@wxports",
                  "content": "xxx"
            }
      ]
}

读取

this.$ajax.get("http://localhost:3000/src/json/news.json",{}).then(function (response) {
      self.newsList=JSON.parse(JSON.stringify(response.data))['newsList']
})

 

Javascript - 学习总目录

Javascript - Vue - webpack中的axios的更多相关文章

  1. Javascript - Vue - webpack中的组件、路由和动画

    引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...

  2. 使用pug(jade),以及在vue+webpack中使用pug(jade)

    一:在HTML中使用pug 在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下: 转译以后 好, ...

  3. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  4. vue脚手架中使用axios

    虽然之前用过n次,但大多都是直接在页面中引入axios.js的.今天想换种方式使用,一时间竟不知道怎么配置了.特此记录下. 1.npm 安装axios,文件根目录下安装,指令如下:  npm inst ...

  5. [vue]webpack中使用组件

    https://blog.csdn.net/ywl570717586/article/details/79984909 vue.js中全局组件 全局组件的定义 <!DOCTYPE html> ...

  6. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  7. 介绍vue项目中的axios请求(get和post)

    一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...

  8. 在使用Vue.js中使用axios库时,遇到415错误(不支持的媒体类型(Unsupported media type))

    知识点:vue2.0中使用axios进行(put,post请求时),遇到415错误 解决办法:在axios的第三个参数config中,设置请求头信息'Content-Type': 'applicati ...

  9. vue项目中关于axios的简单使用

    axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...

随机推荐

  1. Oracle19c 如何用rman duplicate 克隆一个数据库。(Backup-Based, no achive log)

    Oracle19c 如何用rman duplicate 克隆一个数据库. 首先克隆有两种方法,一种是Backup-Based,一种是Active方式.官网文档链接https://docs.oracle ...

  2. windows 查看端口号,关闭端口进程

    1.打开cmd,输入:netstat -ano | findstr 8080,根据端口号查找对应的PID.结果如下: 2.根据PID找进程名称,输入命令:tasklist | findstr 1789 ...

  3. 使用Pycharm创建Django项目无法创建app.

    Python3.7使用Django1.11.7创建Django项目报以下错误时: 在使用Pycharm创建Django项目报以下错误时: Traceback (most recent call las ...

  4. 流畅的python--装饰器

    装饰器:以某种方式增强函数.两大特性:1.可以将被装饰的函数替换成其他函数. 2.在加载模块时立即执行.案例1def make_avarage(): count=0 total=0 def avera ...

  5. 生成python 依赖文件

    1.生成requirement 文件的两种方式 1. 'pip freeze ' > requirements.txt --会将环境中的依赖包全都加入(不推荐) 2. 项目用到生成依赖 '# 安 ...

  6. (JAVA1)学习,复习的好帮手

    学习准备:博客 博客,英文名Blog,它的正式名称为网络日记. 为什么要写博客 我们学习任何东西都需要总结和思考.有时候我们一直在赶路,却忘了放慢脚步 提升文笔组织能力 提升学习总结能力 提升逻辑思维 ...

  7. C#曲线分析平台的制作(五,Sqldependency+Signalr+windows 服务 学习资料总结)

    在前篇博客中,利用interval()函数,进行ajax轮询初步的实现的对数据的实时显示.但是在工业级别实时显示中,这并非是一种最好的解决方案.随着Html5 websocket的发展,这种全双工的通 ...

  8. linux中的防火墙netfilter iptables

    目录 一.Linux防火墙基础 1.1 ptables的表.链结构 1.2 数据包控制的匹配流程 二.编写防火墙规则 1.iptables的安装 2.1 基本语法.控制类型 一般在生产环境中设置网络型 ...

  9. 小白学习Vue第五天(v-model实用的地方)

    用法一radio单选项 <!-- 添加name男女选项互斥 --> <label for="male"> <input type="radi ...

  10. VMware 安装 Centos 7 虚拟机配置网络

    在 Windows 机器上如果想使用 Linux 环境,最方便的方式莫过于使用虚拟机,最常用的软件各位肯定也不陌生,大名鼎鼎的 VMware . 不过这玩意有点稍稍不是那么智能,每次安装 Linux ...