详解Vue-Cli 异步加载数据的一些注意点


Posted in Javascript onAugust 12, 2017

刚开始学vue的时候没有使用脚手架,现在用脚手架写法有点不同,今天遇到的问题是使用豆瓣api异步加载数据的时候,会一直在命令行上报错,基本上错误都是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
  }
 },
 
 // 生命周期函数
 created(){

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

在发送异步请求的时候要注意两个点:

数据的初始值,我这里是给null作为初始值。

判断数据是否存在,在html中,我用v-if判断moviesData是否存在,可以确保只有在数据存在的时候才会渲染。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
jQuery使用方法
Feb 04 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
js常见遍历操作小结
Jun 06 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
js模块加载方式浅析
Aug 12 #Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 #Javascript
Node.js pipe实现源码解析
Aug 12 #Javascript
vue实现移动端图片裁剪上传功能
Aug 18 #Javascript
JavaScript实现图片切换效果
Aug 12 #Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 #Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 #Javascript
You might like
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
js实现计算器功能
2020/08/10 Javascript
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
python多线程抽象编程模型详解
2019/03/20 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python各种excel写入方式的速度对比
2020/11/10 Python
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
中学老师的自我评价
2013/11/07 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
美容院营销方案
2014/03/05 职场文书
家长给老师的感谢信
2015/01/20 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript