vue借助axios实现网络通信
生活随笔
收集整理的這篇文章主要介紹了
vue借助axios实现网络通信
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
vue的好處之一，只關(guān)注視圖層。對于通信，可以在vue實(shí)例對象創(chuàng)建前通過mounted鉤子函數(shù)發(fā)送ajax請求，來拿到j(luò)son數(shù)據(jù)。
發(fā)送請求通過axios，或者jQuery發(fā)送。
請求的數(shù)據(jù)在response對象里面。并綁定到vue對象data方法里。
1. 要訪問的數(shù)據(jù)
{"name": "bitqian","age": 19,"address": {"school": "changsha","home": "hunan"},"hobby": [{"book": "《麥田里的守望者》","game": "《king of glory》"},{"language": ["java", "js", "python"],"blog": "https://blog.csdn.net/qq_44783283"}] }2. vue借助第三方包axios發(fā)送請求
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>axios 請求</title><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="../js/vue.js"></script> </head> <body><div id="app">{{ info.hobby[1].language[0] }}<a v-bind:href="info.hobby[1].blog">bitqian's blog</a>{{ info.address.home }}</div><script>let vue = new Vue({el: "#app",data() { // 接收數(shù)據(jù)并返回return { // 返回的格式要與響應(yīng)的json格式對應(yīng)info: {name: null,address: {school: null,home: null},hobby: [{book: null,game: null},{language: [null, null, null],blog: null}]}}},mounted() { // 鉤子函數(shù)，在虛擬dom執(zhí)行前，用于發(fā)Ajax請求// axios.get('../data.json').then(response=> console.log(response.data));axios.get('../data.json').then(response=>(this.info=response.data))}});</script></body> </html>總結(jié)
以上是生活随笔為你收集整理的vue借助axios实现网络通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AppData、Roaming、Loca
- 下一篇： vue 文字转语音mp3_vue项目或网