使用Vue實(shí)現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)
更新時(shí)間：2019年10月28日 17:12:36 作者：Jia_Li_z
今天小編就為大家分享一篇使用Vue實(shí)現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
閑著沒事寫了一個(gè)電影推薦的網(wǎng)頁，很簡單，使用的是Vue的實(shí)現(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;
}
},
})
因?yàn)槲沂褂玫氖莂xios, 在get方法中的this指向的這個(gè)函數(shù)，所以要在調(diào)用之前聲明this的指向?yàn)閂ue實(shí)例的this，
要不然就是賦值不成功，導(dǎo)致無法渲染(弄了半天)
以上這篇使用Vue實(shí)現(xiàn)調(diào)用接口加載頁面初始數(shù)據(jù)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue父子組件傳值不能實(shí)時(shí)更新的解決方法
Vue是一個(gè)以數(shù)據(jù)驅(qū)動(dòng)、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實(shí)時(shí)更新的解決方法,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Element布局組件el-row和el-col的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認(rèn)插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04
Element中el-tabs左右滑動(dòng)動(dòng)畫的實(shí)現(xiàn)
本篇博客將詳細(xì)介紹如何在使用 Vue 以及 Element UI 時(shí),實(shí)現(xiàn)一個(gè)具有左右滑動(dòng)效果的 tab 切換動(dòng)畫,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
Vue.js使用v-show和v-if的注意事項(xiàng)
這篇文章一開始先對(duì)Vue.js中v-show和v-if兩者的區(qū)別進(jìn)行了簡單的介紹，而后通過圖文詳細(xì)給大家介紹了Vue.js使用v-show和v-if注意的事項(xiàng)，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法
這篇文章主要介紹了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法,結(jié)合實(shí)例形式分析了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn)
本文通過實(shí)例代碼介紹了Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了Vue.js進(jìn)行查詢操作的實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-08-08
Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例詳解
這篇文章主要介紹了Vue3.0路由跳轉(zhuǎn)攜帶參數(shù)的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04