异步组件加载

首先准备-----简单的框架搭出来

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>异步组件加载</title>

    <meta name="viewport" content="width=device-width ,initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

<div id="app">

    <App></App>

</div>

<script>

    const App={

        data(){

            return{

                msg:'异步组件加载'

            }

        },

        template:`<div>{{msg}}</div>`,

    };

    let app = new Vue({

        el:'#app',

        template:``,

        components:{

            App

        }

    })

</script>

</body>

</html>

在新建一个Text.js文件

export default {

    data() {

        return {

            msg: '小朋友'

        }

    },

    template: `<div>{{msg}}</div>`,

}

总代码

1. 里面标签的改变

2.刚开始只有vue.js的加入 在点击之后 Text.js被加载

3.要用一个工厂函数

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>异步组件加载</title>

    <meta name="viewport" content="width=device-width ,initial-scale=1">

    <script src="../no2_组件/vue.js"></script>

    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

</head>

<body>

<div id="app">

    <App></App>

</div>

<script type="module">

    const App = {

        data() {

            return {

                isShow:false

            }

        },

        methods:{

            asyncLoad(){

                  this.isShow = !this.isShow

            }

        },

        template: `<div>

                    <button @click="asyncLoad">异步组件加载</button>

                    <Test v-if="isShow"></Test>

                </div>`,

        components: {

            Test:()=>import('./Test.js')                             //  工厂函数   import导入

        }

    };

    let app = new Vue({

        el: '#app',

        template: ``,

        components: {

            App

        }

    })

</script>

</body>

</html>

vue学习（六）异步组件加载的更多相关文章

  1. vue 学习六 在组件上使用v-model

    其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...

  2. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  3. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

  4. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  5. webpack学习笔记--按需加载

    为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...

  6. YYWebImage——iOS异步图片加载框架

    本文转载至 http://www.mobile-open.com/2015/86582.html   YYWebImage 是一个异步图片加载框架 (YYKit 组件之一). 其设计目的是试图替代 S ...

  7. [技术博客]React-Native中的组件加载、卸载与setState问题

    React-Native中的组件加载.卸载与setState问题. Warning: Can only update a mounted or mounting component. This usu ...

  8. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  9. javascript 异步模块加载 简易实现

    在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等. 因此在复杂项目中引入AM ...

随机推荐

  1. 可以看一下我学习linux的过程

    学习Linux的最佳方法是将它用于日常工作. 阅读Linux书籍,观看Linux视频不仅仅是足够的. 学习Linux没有捷径可走. 你不可能在一夜之间在Linux中掌握. 这需要时间和持久性. 刚刚潜 ...

  2. springboot#配置文件处理

    1. 加载自定义属性文件 2. 通过bean聚合相关属性 1. 在启动类上通过如下注解可以加载自定义的属性文件 @PropertySource(value = {"classpath:pro ...

  3. 第一章、ssh安装及远程登入配置

    1.Ubuntu下 确认 SSH Server 是否启动 输入: sudo ps -e | grep ssh. 如果正确启动, 命令行中会显示sshd. 安装服务端 OpenSSH Server 输入 ...

  4. 「NOI2015」荷马史诗

    传送门 Luogu 解题思路 \(k\) 叉 \(\text{Huffman}\) 树板子题,至于最长串最短,只要同样权值的优先考虑深度小的就好了. 细节注意事项 咕咕咕 参考代码 #include ...

  5. IOS pin约束问题 存在间隙

    今天在为自己的view添加约束 对比以前添加的约束时,发现有有两层淡红色线框一条实线和一条虚线,而以前一个demo中添加的则只有一个蓝色实线框. 今天添加的约束如图1所示: 图1 而以前添加约束如图2 ...

  6. SciPy 安装

    章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...

  7. 设备树DTS 学习：3-常用的DTS 函数

    Linux内核中目前DTS相关的函数都是以of_前缀开头的,它们的实现位于内核源码的drivers/of下面 void __iomem*of_iomap(struct device_node *nod ...

  8. Redis——进阶

    redis的持久化 redis提供两种备份方式,一种是RDB 一种是AOFRDB默认开启.关闭注释掉所有的save,存储的是redis 具体的值,会压缩存储.AOF配置文件中appendonly ye ...

  9. 063、Java中输出信息

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  10. 07.Delphi接口的生命周期

    在Delphi的接口中,是不需要释放的,调用完之后,接口的生命周期就结束了,如下面的例子 unit mtReaper; interface type // 定义一个接口 IBase = interfa ...