快捷導(dǎo)航

詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)

更新時(shí)間：2017年08月12日 16:44:35 作者：Evgni0n

本篇文章主要介紹了詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

剛開始學(xué)vue的時(shí)候沒有使用腳手架，現(xiàn)在用腳手架寫法有點(diǎn)不同，今天遇到的問題是使用豆瓣api異步加載數(shù)據(jù)的時(shí)候，會一直在命令行上報(bào)錯(cuò)，基本上錯(cuò)誤都是xxx 未定義。

例子

<template>
<div v-if="moviesData">

  <!-- 正在上映的電影-北京 -->
  <h1>{{ moviesData.title }}</h1>
  
</div>
</template>

<script>
import jsonp from 'jsonp'  // 一個(gè)jsonp插件 npm install jsonp --save

export default {
 data(){
  return {
   moviesData: null    // 如果不事先給一個(gè)默認(rèn)值的data，就會報(bào) xxx is not define
  }
 },
 
 // 生命周期函數(shù)
 created(){

  // 發(fā)送請求
  jsonp('https://api.douban.com/v2/movie/in_theaters', null, (err, data)=>{
   this.moviesData = data;
  });
 }
}
</script>

在發(fā)送異步請求的時(shí)候要注意兩個(gè)點(diǎn)：

數(shù)據(jù)的初始值，我這里是給null作為初始值。

判斷數(shù)據(jù)是否存在，在html中，我用v-if判斷moviesData是否存在，可以確保只有在數(shù)據(jù)存在的時(shí)候才會渲染。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳細(xì)講一講vue3下會造成響應(yīng)式丟失的情況
vue3開發(fā)過程中,綁定的響應(yīng)式數(shù)據(jù)失去了響應(yīng)式,如何解決問題呢,下面這篇文章主要給大家介紹了關(guān)于vue3下會造成響應(yīng)式丟失的情況,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue封裝axios的兩種方法總結(jié)
在不同的前端項(xiàng)目中使用相同的axios封裝有利于保持一致性,有利于數(shù)據(jù)之間的傳遞和處理,本文主要提供兩種對axios進(jìn)行封裝的思路,有需要的小伙伴可以參考一下
2023-10-10
在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明
這篇文章主要介紹了在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中axios請求的封裝實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于vue中axios請求封裝的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧要的朋友可以參考下
2019-03-03
vue項(xiàng)目結(jié)構(gòu)目錄超詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目結(jié)構(gòu)目錄超詳細(xì)介紹的相關(guān)資料,Vue項(xiàng)目目錄結(jié)構(gòu)是指在開發(fā)Vue項(xiàng)目時(shí),為了更好地組織和管理代碼,將不同的文件按照一定的規(guī)則和層次結(jié)構(gòu)進(jìn)行分類和存放的方式,需要的朋友可以參考下
2023-12-12
vue-cli 如何打包上線的方法示例
這篇文章主要介紹了vue-cli 如何打包上線的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
vue動(dòng)態(tài)子組件的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了vue動(dòng)態(tài)子組件的兩種實(shí)現(xiàn)方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時(shí)非常有用,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下
2024-06-06
基于Vue2實(shí)現(xiàn)簡易的省市區(qū)縣三級聯(lián)動(dòng)組件效果
這是一個(gè)基于Vue2的簡易省市區(qū)縣三級聯(lián)動(dòng)組件，可以控制只顯示省級或只顯示省市兩級，可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱數(shù)據(jù)，適用于各種有關(guān)城市區(qū)縣的應(yīng)用。需要的朋友可以參考下
2018-11-11
Vue.js中自定義Markdown插件實(shí)現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個(gè)插件來解析<references>標(biāo)簽,并將其轉(zhuǎn)換為HTML,這種方法可以應(yīng)用于其他自定義標(biāo)簽和功能,為Vue.js應(yīng)用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧
2024-07-07