使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)
更新時間：2019年10月28日 17:12:36 作者：Jia_Li_z
今天小編就為大家分享一篇使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
閑著沒事寫了一個電影推薦的網(wǎng)頁，很簡單，使用的是Vue的實現(xiàn).
let vm = new Vue({
el:'#content',
data:{
name:'',
pic:'',
actor:'',
detail:'',
link:''
},
mounted:function () {
this.getMovie();
},
methods:{
getMovie:function () {
var _this = this;
let url = '/niuren/getRecommendFilm';
axios.get(url).then(function (res) {
_this.name = res.data.data.name;
_this.pic = res.data.data.pic;
_this.actor = res.data.data.actor;
_this.detail = res.data.data.detail;
_this.link =res.data.data.link;
})
},
goLink:function () {
var _this = this;
window.location.href = _this.link;
}
},
})
因為我使用的是axios, 在get方法中的this指向的這個函數(shù)，所以要在調(diào)用之前聲明this的指向為Vue實例的this，
要不然就是賦值不成功，導(dǎo)致無法渲染(弄了半天)
以上這篇使用Vue實現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了通過原生vue添加滾動加載更多功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了如何在vue中使用ant-design-vue組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
vue學(xué)習(xí)之Vue-Router用法實例分析
這篇文章主要介紹了vue學(xué)習(xí)之Vue-Router用法,結(jié)合實例形式分析了Vue-Router路由原理與常見操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue2的diff算法的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟
vue版本升級相信大家應(yīng)該都遇到過,下面這篇文章主要給大家介紹了關(guān)于Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue elementui el-form rules動態(tài)驗證的實例代碼詳解
在使用elementUI el-form 中，對于業(yè)務(wù)不同的時候可能會產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個表單控件el-form中。這篇文章主要介紹了vue elementui el-form rules動態(tài)驗證的實例代碼,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue使用Proxy代理后仍無法生效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue自定義全局Toast和Loading,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Proxy代理對象詳解,Proxy 是ES6中提供的一個非常強大的功能，可以用來代理另一個對象，從而攔截、監(jiān)視并修改這個對象的各種操作,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)視數(shù)據(jù)的原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02