vue借助axios实现网络通信

vue的好处之一，只关注视图层。对于通信，可以在vue实例对象创建前通过mounted钩子函数发送ajax请求，来拿到json数据。
发送请求通过axios，或者jQuery发送。
请求的数据在response对象里面。并绑定到vue对象data方法里。

1. 要访问的数据

{"name": "bitqian","age": 19,"address": {"school": "changsha","home": "hunan"},"hobby": [{"book": "《麦田里的守望者》","game": "《king of glory》"},{"language": ["java", "js", "python"],"blog": "https://blog.csdn.net/qq_44783283"}]
}

2. vue借助第三方包axios发送请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>axios 请求</title><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="../js/vue.js"></script>
</head>
<body><div id="app">{{ info.hobby[1].language[0] }}<a v-bind:href="info.hobby[1].blog">bitqian's blog</a>{{ info.address.home }}</div><script>let vue = new Vue({el: "#app",data() { // 接收数据并返回return { // 返回的格式要与响应的json格式对应info: {name: null,address: {school: null,home: null},hobby: [{book: null,game: null},{language: [null, null, null],blog: null}]}}},mounted() { // 钩子函数，在虚拟dom执行前，用于发Ajax请求// axios.get('../data.json').then(response=> console.log(response.data));axios.get('../data.json').then(response=>(this.info=response.data))}});</script></body>
</html>

vue借助axios实现网络通信相关推荐

借助axios的拦截器实现Vue.js中登陆状态校验的思路
在做Vue中的登陆校验时,思路应该是这样的:先确定一个路由页面是否需要登陆才能访问,如果需要,就需要用户登陆,如果不需要,用户直接可以访问. 那么,首先来说,后台系统中,不一定每一个页面都要进行登陆权 ...
vue中axios如何实现token验证
title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...
解决在vue中axios请求超时的问题
解决在vue中axios请求超时的问题参考文章: (1)解决在vue中axios请求超时的问题 (2)https://www.cnblogs.com/zhouyangla/p/8757149.htm ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
ASP.NET Core微服务(四)——【静态vue使用axios解析接口】
ASP.NET Core微服务(二)--[ASP.NET Core Swagger配置]: 环境:win10专业版+vs2019+sqlserver2014/2019+vsCode+在线资源 boot ...
Vue使用axios，设置axios请求格式为form-data
Vue使用axios,设置axios请求格式为form-data 这个老生常谈了,还是先记录一遍,方面后面自己查. !!! 设置form-data请求格式直接翻到后面看. 1. 安装axios 在项目 ...
vue使用axios并存数据到state
npm安装 npm install axios --save main.js导入 // 引入axios,并加到原型链中 import Axios from 'axios' import QS from ...
vue 使用axios
axios 基于http客户端的promise,面向浏览器和nodejs 特点从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API ...
vue应用axios.get请求的代码格式（2种）- 代码篇
vue应用axios.get请求的代码格式(2种)- 代码篇代码: axios.get(this.serverPath+'/supermarket/fruits/options?id='+id, { ...

vue借助axios实现网络通信

1. 要访问的数据

2. vue借助第三方包axios发送请求

vue借助axios实现网络通信相关推荐

最新文章

热门文章