In large applications, dividing the application into smaller chunks is often times necessary. In this lesson, we will look at how vue loads async components into your application.

<template>
<div>
<section class="pa2">
<h2>Lazy loading...</h2>
<button @click="show = true">Lazy load</button>
<div v-if="show">
<Async></Async>
</div>
</section>
</div>
</template> <script> const Async = resolve => {
console.log('loading...')
setTimeout(() => {
require(['~components/async.vue'], resolve)
console.log('loaded')
}, 1000)
} export default {
components: {
Async
},
data () {
return {
show: false
}
}
}
</script>

[Vue] Load components when needed with Vue async components的更多相关文章

  1. [Vue @Component] Handle Errors and Loading with Vue Async Components

    Because async components are not bundled with your app, they need to be loaded when requested. This ...

  2. Vue中mixins、extends、extend和components的作用和区别

    关于mixins:官方文档: https://cn.vuejs.org/v2/guide/mixins.html 一.components Vue.component是用来注册或获取全局组件的方法,其 ...

  3. 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密

    一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...

  4. [Vue + TS] Using Route events inside Vue

    vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...

  5. 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板

    环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...

  6. vue+node+es6+webpack创建简单vue的demo

    闲聊: 小颖之前一直说是写一篇用vue做的简单demo的文章,然而小颖总是给自己找借口,说没时间,这一没时间一下就推到现在了,今天抽时间把这个简单的demo整理下,给大家分享出来,希望对大家也有所帮助 ...

  7. vue学习笔记(四)——Vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

  8. Vue.js-11:第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  9. vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

随机推荐

  1. JavaScript提高:006:ASP.NET使用easyUI TABS标签updatepanel

    前文使用了easyui的tab标签.切换问题,使用了session保存当前选中页,然后页面总体刷新时再切换至上次保存页码.那么使用updatepanel后,这个问题就非常好攻克了.http://blo ...

  2. Lucene-全文索引

    近期接触了lucene,我想也有非常多人以前听过,于是带着好奇心,我開始对lucene进行了解,给我影响最深的是它非常多的应用了索引表,这个工具之所以快是就是由于大量引用到了索引表.今天仅仅说下我刚開 ...

  3. NYOJ 203 三国志(Dijkstra+贪心)

    三国志 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描写叙述 <三国志>是一款非常经典的经营策略类游戏.我们的小白同学是这款游戏的忠实玩家.如今他把游戏简化一下 ...

  4. Icomparer和Icomparable集合排序

    c#中实现对象集合的排序可以使用ArrayList中的Sort()方法,而有比较才能谈排序,因为不是基本类型(如string ,int.double......等)所以.NET Framework不可 ...

  5. 实用的 Python 包 —— 使用 win32 的剪贴板

    1. usage >> import win32clipboard >> win32clipboard.OpenClipboard() >> win32clipbo ...

  6. 一款开源Office软件---Lotus Symphony在Linux系统下的应用

    点击下载观看试用录像   Linux系统下的办公软件有OpenOffice.永中Office.红旗Red Office.金山Wps Office及StarOffice等,今天我为大家介绍IBM推进军O ...

  7. vuejs模板中使用html代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 最大子段和 模板题 51Nod 1049

    N个整数组成的序列a[1],a[2],a[3],…,a[n],求该序列如a[i]+a[i+1]+…+a[j]的连续子段和的最大值.当所给的整数均为负数时和为0. 例如:-2,11,-4,13,-5,- ...

  9. celery work logging 问题

    celery 的日志里只输出日志 不输入标准打印

  10. 洛谷——P3178 [HAOI2015]树上操作

    https://www.luogu.org/problem/show?pid=3178#sub 题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种:操作 1 ...