异步请求数据,但是生命周期函数也是异步的,怎么才能保证渲染之前就能拿到数据呢?

官方给了两种方案,

我们可以在异步获取数据的时候加上一个loading表示现在在获取数据.....

由于ajax是异步操作,vue不能保证在渲染之前拿到数据,vue能做的是初始化页面隐藏,拿到数据再显示。

根据需求,我们可以在created,beforeCreate的时候调用接口获取数据,在成功拿到数据之后的回调函数里面,控制页面显示,这样可以最大程度上避免页面跳动的问题。这样渲染和请求是异步的,等到请求回来之后再把页面放出来(v-if)。

vue在渲染之前拿到数据操作.......vue数据获取的更多相关文章

  1. VUE 路由参数改变重新刷新数据

    VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...

  2. vue music-抓取歌单列表数据(渲染轮播图)

    下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...

  3. vue 动态渲染数据很慢或不渲染

    vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...

  4. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  5. Vue nodejs商城项目- 前后端数据传递

    .利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mondodb中获取数据,首先安装mongoose: cnpm install mongoose --save   使用m ...

  6. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  7. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  8. 14、VUE服务器渲染

    1.HTML的渲染方式 1.1. 浏览器本地渲染 这种方式不会被搜索引擎获取内容,所以不利于网站的推广. 因为浏览器本地渲染是页面js通过发送ajax请求获取后台的json数据,然后生成页面内容. 爬 ...

  9. vue服务器端渲染指南研究

    什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...

随机推荐

  1. AutoDesk产品,Maya 2018 安装,Microsoft Visual C++ 2012 安装失败,结果 = -2147024546,安装Microsoft Visual C++ 2012 Redistributable 错误0x80070005 等等

    今日老弟装Maya 2018出现问题,我帮忙解决了一下问题,过程颇为曲折,记录一下,看能否帮到有类似困惑的朋友. 我和老弟的电脑牌子一样,就现在自己电脑上装了,竟然开始和他的错误是一样的!都是Micr ...

  2. 你真的了解HTML吗

    有这么一段HTML,请挑毛病: <P> 哥写的不是HTML,是寂寞.<br><br> 我说: <br>不要迷恋哥,哥只是一个传说 这是原来雅虎一道笔试题 ...

  3. ConvertJavaMiliSecondToDateTime

    private static DateTime ConvertJavaMiliSecondToDateTime(long javaMS)        {            DateTime UT ...

  4. jQuery图片从下往上滚动效果

    在线演示 本地下载

  5. 面向视频的全新AI架构 —— 阿里云智能视觉技术全解

    我们都知道,AI技术正在以可见的速度被应用于各行各业,然而绝大部分业务场景想应用AI技术,都需要算法工程师根据自身业务的标注数据,来进行单独训练,才能打磨出合适的AI模型.如此一来,如何以最低的门槛和 ...

  6. QT,QLabel添加超链接

    1.方法1:使用信号槽绑定方式 //设置超链接并绑定信号槽QLabel *linkLabel = new QLabel(); linkLabel->setText("<a hre ...

  7. 用dreamweaver查找页面位置

    复制页面的一段代码,然后用Dreamweaver在整个项目中查找代码. 找不到的原因:1.查找的内容是从数据库中读出来的.连数据库文件一起查便知. 2.查找的代码是某个函数生成的.

  8. Oracle 11g Pivot函数实现行转列

    先上语法规范: SELECT .... FROM <table-expr> PIVOT ( aggregate-function(<column>) FOR <pivot ...

  9. 【NS2】NS2在ubuntu下的安装

    Step1: 更新系统.在终端输入如下命令 sudo apt-get  update #更新源列表sudo apt-get upgrade #更新已经安装的包sudo apt-get dist-upg ...

  10. JavaWeb登录、注销、退出、记住用户名和密码

    应该是保存在Cookie里,session是放在服务器的内存里的.在用户关闭了网页窗口后,session就清空了.而Cookie是保存在用户的IE临时文件夹中的,再次登录时,读取其中的值传给服务器. ...