Vue-Axios
Vue-Axios
什么是Axios
Axios是一个开源的可以用在浏览器端和NodeJs的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：
- 从浏览器中创建XMLHttpRequests从node.js创建http请求
- 支持Promise API[JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF（跨站请求伪造）
GitHub：https://github.com/gxios/axios
第一个Axios实例
1.创建data.json
{
"name":"MoYu",
"url":"https://www.moyuzc.cn/",
"page":1,
"isNonProfit":true,
"address": {
"street":"含光门",
"city":"陕西西安",
"country":"中国"
},
"links":[
{
"name": "bilibili",
"url": "https://space.bilibili.com/84493733"
},
{
"name": "MoYu",
"url": "https://moyu-zc.gitee.io/"
}
]
}
2.Vue绑定
<div id="vue"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#vue'
});
</script>
3.钩子函数
<script type="text/javascript">
var vm = new Vue({
el:'#vue',
mounted(){ //钩子函数 链式编程 ES6新特性
axios.get('../data.json').then(response=>(console.log(this.info=response.data)));
}
});
</script>
成功获取
注意：response=> 该表达式为ES6新特性，如果出错，可以这样解决：
4.页面显示信息
<div id="vue">
<div>
{{info.name}}
<br>
{{info.address}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#vue',
data(){
return{
//请求的返回参数，必须和 json 字符串一样
info:{
name: null,
address: {
street: null,
city: null,
country: null
},
}
}
},
mounted(){ //钩子函数 链式编程 ES6新特性
axios.get('../data.json').then(response=>(console.log(this.info=response.data)));
}
});
</script>
Vue-呼吸问题
在刚进入页面时，可能会出现如下情况：
显示的是html文件中的信息，而不是调用出的文字
过一会才会变为调用出的文字，这个就是Vue呼吸问题
解决方法
<div id="vue" v-clock>
</div>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
这个就可以啦
5.a标签绑定
<div id="vue" v-clock>
<div>
{{info.name}}
<br>
{{info.address}}
<br>
<a v-bind:href="info.url">点击</a>
</div>
</div>
data(){
return{
//请求的返回参数，必须和 json 字符串一样
info:{
name: null,
address: {
street: null,
city: null,
country: null
},
url: null
}
}
},
点击 a 标签，就会进入你在 data.json ，设置好的 url
