content
axios.get('../data.json').then(response=>(this.info=response.data));
通信交给
axios 来做
get('../data.json') 一个请求
then(response 得到结果
=>(this.info=response.data)); 箭头函数指向它结果要产生的事情Introduce online cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
1. What is Axios
Axios is an open source asynchronous communication framework that can be used in the browser and Node JS. Its main function is to implement AJAX asynchronous communication. Its features are as follows:
Create XMLHttpRequests from the browser
Create http requests from node.js
Support Promise API [chain programming in JS]
Intercept requests and responses
Convert request data and response data
Cancel requests
Automatically convert JSON data
Client supports defense against XSRF (cross-site request forgery)
GitHub: http://GitHub - axios/axios: Promise based HTTP client for the browser and node.js
Chinese documentation: http://axios Chinese website|axios API Chinese documentation| axios
2. Why use Axios
Since Vue.js is a view layer framework and the author (Yuxi You) strictly adheres to the SOC (the principle of separation of concerns), Vue.js does not include the communication function of AJAX. In order to solve the communication problem , the author has developed a separate project named The plug-in of vue-resource , but after entering version 2.0, the maintenance of the plug-in was stopped and the Axios framework was recommended. Use jQuery sparingly because it manipulates the Dom too often!
3. The first Axios app
Problem: Vue loads the template first, then renders the data
Fix flickering issues
<!--v-cloak 解决闪烁问题-->
<style>
[v-cloak]{
display: none;
}
</style>1.data.json
{
"name": "gh_xiaohe个人博客",
"url": "https://blog.csdn.net/gh_xiaohe",
"page": 1,
"isNonProfit": false,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com/"
},
{
"name": "个人博客",
"url": "https://blog.csdn.net/gh_xiaohe"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}2. Test code (1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#vue",
/*
* mounted(){ 钩子函数,链式编程 ES6新特性
*
* 编译好的HTML挂载到页面完成后执行的时间钩子此钩子函数中
* 一般会做一些ajax请求获取数据进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
mounted(){//钩子函数,链式编程 ES6新特性
axios.get('../data.json').then(response => console.log(response.data)); / //执行完响应后 输出一句话 response相应的数据
}
});
</script>
</body>
</html>
2. Test code (2)
<!DOCTYPE html>
<html lang="en" xmlns:v-binf="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-cloak 解决闪烁问题-->
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div>属性名：{
{info.name}}</div>
<div>链接：<a v-bind:href="info.url">{
{info.url}}</a></div>
<div>页数：{
{info.page}}</div>
<div>是否有利润isNonProfit:{
{info.isNonProfit}}</div>
<div>地址：{
{info.address.street}}--{
{info.address.city}}--{
{info.address.country}}</div>
<div>数组：{
{info.links}}</div>
</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var mv = new Vue({
el: "#app",
//此时data() 是方法 ， 不是data 属性 二者不一样
data() {
return {
//请求的返回参数合适,必须和json字符串一样 可以省略不写
info: {
name: null,
url: null,
address:{
street:null,
city:null,
country:null
},
links:[]
}
}
},
/*
* mounted(){ 钩子函数,链式编程 ES6新特性
*
* 编译好的HTML挂载到页面完成后执行的时间钩子此钩子函数中
* 一般会做一些ajax请求获取数据进行数据初始化
* 注意：mounted在整个实例中只执行一次
* */
mounted() { //钩子函数,链式编程 ES6新特性
axios.get('../data.json').then(response => this.info=response.data); //执行完响应后 输出一句话 response相应的数据
}
});
</script>
</body>
</html>
Vue life cycle
A Vue instance has a complete life cycle, that is , a series of processes from the beginning of creating initialization data, compiling templates, mounting DOM, rendering, updating, rendering, and unloading. We call this the life cycle of Vue . In layman's terms, it is the process of Vue instance from creation to destruction , which is the life cycle.
