Vue Axios异步通信
Axios 是一个开源的可以用在浏览器端和Node.js 的异步通信框架,它的主要作用就是实现AJAX异步通信。
npm install axios
引入Axios在线包
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
案例
1.创建本地json数据 data.json
{ "name": "创客未来", "url": "https://www.baidu.com", "page": 1, "isNonProfit": true, "address": { "street": "hanguangmen", "city": "shanxixian", "country": "zhongguo" }, "links": [ { "name": "bilibili", "url": "https://www.baidu.com" }, { "name": "bilibili", "url": "https://www.baidu.com" } ] }
2.加载数据并渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue"> <div>{{info.name}}</div> <div>{{info.address.street}}</div> </div> <!--引入vue.js 包--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> var vm=new Vue({ el:"#vue", data(){ return{ //请求的返回参数格式,必须和json字符串一样 info:{ name:null, address:{ street:null, city:null, country:null } } } }, mounted(){//钩子函数,一般做Ajax请求 链式编程 axios.get('data.json').then(response=>(this.info=response.data)) } }); </script> </body> </html>