快捷導航

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

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

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

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

例子

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

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

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

export default {
 data(){
  return {
   moviesData: null    // 如果不事先給一個默認值的data，就會報 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ù)據(jù)的初始值，我這里是給null作為初始值。

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

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

您可能感興趣的文章:

相關(guān)文章

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