6，网络通信（Vue：Axios异步通信）
axios: cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
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/"
}
]
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--解决数据显示之前避免模板显示出来-->
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--1,View层，模板-->
<div id="app" v-cloak>
<div>地名：{
{info.name}}</div>
<div>地址：街道：{
{info.address.street}}</div>
<a v-bind:href="info.url">点击跳转</a>
</div>
<!--2,导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!--axios:cdn-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
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));
}
});
</script>
</body>
</html>
运行界面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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)); }});
运行界面
[外链图片转存中…(img-RaZ5ZIez-1606874135163)]
xhr：即实现了异步交互，（异步通信）
5，说明
说明：
- v-cloak解决页面闪烁问题（不会出现{ {message}}这样的信息）
- 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
- 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
- 我们在data中的数据结构必须和
Ajax响应回来的数据格式匹配！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qDYNYQSA-1606874135171)(C:\Users\zp\Deskt