快捷導(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í)候，會(huì)一直在命令行上報(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，就會(huì)報(bào) xxx is not define
  }
 },
 
 // 生命周期函數(shù)
 created(){

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

Vue中$attrs與$listeners的使用教程
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-11-11
Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對(duì)話框
最近遇到了個(gè)需求是使用element-ui插件編寫頁面,點(diǎn)擊按鈕,彈出對(duì)話框,這篇文章主要給大家介紹了關(guān)于Vue中使用element-ui給按鈕綁定一個(gè)單擊事件實(shí)現(xiàn)點(diǎn)擊按鈕就彈出dialog對(duì)話框的相關(guān)資料,需要的朋友可以參考下
2022-11-11
Vue中的計(jì)算屬性和axios基本使用回顧
這篇文章主要介紹了Vue中的計(jì)算屬性和axios基本使用回顧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
詳解Vue.js iview實(shí)現(xiàn)樹形權(quán)限表（可擴(kuò)展表）
這篇文章主要介紹了詳解Vue.js iview實(shí)現(xiàn)樹形權(quán)限表（可擴(kuò)展表），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue實(shí)現(xiàn)web前端登錄頁數(shù)字驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web前端登錄頁數(shù)字驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
Vue實(shí)現(xiàn)模糊查詢搜索功能的步驟詳解
本文主要介紹了Vue實(shí)現(xiàn)模糊查詢搜索功能的步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-10-10
vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件
本篇文章主要介紹了vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-04-04
詳解vue組件之間相互傳值的方式
這篇文章主要介紹了vue組件之間相互傳值的方式，對(duì)vue感興趣的同學(xué)，可以參考下
2021-05-05
vue打包后,用后端接口報(bào)錯(cuò)304、404問題
這篇文章主要介紹了vue打包后,用后端接口報(bào)錯(cuò)304、404問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05