详解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 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 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
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php数组指针操作详解
2017/02/14 PHP
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python扩展内置类型详解
2018/03/26 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
django API 中接口的互相调用实例
2020/04/01 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
python基于openpyxl生成excel文件
2020/12/23 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
致共产党员倡议书
2014/04/16 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
英文感谢信格式
2015/01/21 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
边城读书笔记
2015/06/29 职场文书