Vue（狂神说系列）|【Vue】—6（网络通信（Vue：Axios异步通信）（狂神系列）） Vue（狂神说系列）|vue

6，网络通信（Vue：Axios异步通信） axios: cdn

src="http://img.readke.com/220415/1K4521946-0.jpg">

1，Vue实例的生命周期

Vue有一个完整的生命周期，也就是从创建开始，初始化数据，编译模板，挂载DOM，渲染–》更新–》渲染，卸载，等一系列过程，我们称之为Vue的生命周期。通俗的说就是Vue实例从创建到销毁的过程，就是生命周期。

2，什么是Axios

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API[JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF(跨站请求伪造)

GitHub：https://github.com/axios/axios
中文文档：http://www.axios-js.com/

3，为什么要使用Axios

由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为它操作Dom太频繁!

4,代码实例

{ "name":"狂神说java", "url": "http://baidu.com", "page": "1", "isNonProfit":"true", "address": { "street": "含光门", "city":"陕西西安", "country": "中国" }, "links": [ { "name": "B站", "url": "https://www.bilibili.com/" }, { "name": "4399", "url": "https://www.4399.com/" }, { "name": "百度", "url": "https://www.baidu.com/" } ] }

Title> [v-cloak]{ display: none; } 地名：{{info.name}} 地址：街道：{{info.address.street}} 点击跳转 src="http://img.readke.com/220415/1K452C12-1.jpg">src="http://img.readke.com/220415/1K4521946-0.jpg"> >var vm=new Vue({ //el:元素，绑定 el:"#app", //data:vm属性 //data(),函数 data(){ return{ info:{ name:null, address:{ street:null }, url:null } } }, mounted(){//钩子函数链式编程 ES6新特性 axios.get('../data.json').then(response=>(this.info=response.data)); } });

运行界面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaZ5ZIez-1606874135163)(C:\Users\zp\AppData\Roaming\Typora\typora-user-images\image-20201202094202833.png)]
xhr：即实现了异步交互，（异步通信）

5，说明

说明：

v-cloak解决页面闪烁问题（不会出现{{message}}这样的信息）
在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

street:null }, url:null } } }, mounted(){//钩子函数链式编程 ES6新特性 axios.get('../data.json').then(response=>(this.info=response.data)); }

});