详解Vue-Cli 异步加载数据的一些注意点
网络编程 2021-07-04 18:33www.168986.cn编程入门
本篇文章主要介绍了详解Vue-Cli 异步加载数据的一些注意点,长沙网络推广觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
刚开始学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./v2/movie/in_theaters', null, (err, data)=>{ this.moviesData = data; }); } } </script>
在发送异步请求的时候要注意两个点:
数据的初始值,我这里是给null
作为初始值。
判断数据是否存在,在html中,我用v-if
判断moviesData
是否存在,可以确保只有在数据存在的时候才会渲染。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:浅谈关于angularJs中使用$.ajax的注意点
下一篇:js模块加载方式浅析
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程