當vue與axios直接在html文件中使用的時候，位于axios的請求中的this指向并不是指向vue,而是指向window，如果在請求中直接用this獲取data中的數(shù)據(jù)會出現(xiàn)undefined的問題，解決思路是將ES5的函數(shù)語法更換為箭頭函數(shù)即可解決此問題，深層的原因就得深入去了解箭頭函數(shù)和普通函數(shù)之間的區(qū)別了！

案例：

new Vue({el: '#app',data:{carousels: [],     },    created() {      axios.get('/api/banners/').then(function (response) {         // 這里的this.carousels是undefined，因此上下邊的賦值是不起作用的           this.carousels = res.data       }).catch(function (error) {           console.log(err)       });     }, })

以上案例可以發(fā)現(xiàn)在axios中使用this獲取data中的值是獲取不到的，這就是this的指向問題造成的，他不是指向vue，只需要修改如下，將function函數(shù)改為箭頭函數(shù)即可解決！

修改代碼如下：

new Vue({el: '#app',data:{carousels: [],     },    created() {      axios.get('/api/banners/').then(res => {           this.carousels = res.data       }).catch(err => {           console.log(err)       });     }, })

到此問題就解決了！