异步组件加载

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

<!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. jmeter分布式linux负载机，windows主控机

    1.将参数化文件上传到linux服务器,放在linux上jmeter的bin路径下 2.设置server.rmi.ssl.disable=true 分别修改主控机和负载机的jmeter.propert ...

  2. 02-01 Android学习进度报告一

    前两天,刚刚安装好有关Android开发有关的软件并配好了环境,有一些体会想要发表. 首先我了解到有一款专门用于Android开发的软件,叫做Android Studio ,是一个IDE集成软件 于是 ...

  3. java的浅拷贝和深拷贝（待解决）

    1.什么是浅拷贝,什么是深拷贝? 2.storm的并行度问题,需要使用全局变量static ConcorrentHashMap,因为加了static,所有的线程只能拷贝该全局变量的一个唯一的副本,进行 ...

  4. SIM800L AT command

    /*********************************************************** AT+ICF==<format> ,<parity> ...

  5. IP 和 IP地址的区别和联系

    IP(internet protocol) 网际协议 和IP地址有人会把“IP”和“IP 地址”搞混,“IP”其实是一种协议的名称.IP 协议的作用是把各种数据包传送给对方.而要保证确实传送到对方那里 ...

  6. 落谷p1325雷达安装(计算几何)

    传送门 //p1325雷达安装 //很明显雷达应该安装在海岸线上 //而为了满足一个点被覆盖那在区间[x - sqrt(d ^ 2 - y ^ 2), x + sqrt(d ^ 2 - y ^ 2)] ...

  7. 初学微信小程序——配置问题（1）

    一.注册: 微信小程序账号注册:登录https://mp.weixin.qq.com  点击“立即注册”->”小程序” 注册完成后,下载微信小程序开发者工具: 依次点击:“首页”->“文档 ...

  8. day07-Python运维开发基础(深/浅拷贝、字典/集合/相关操作)

    1. 深拷贝与浅拷贝 # ### 深拷贝 和 浅拷贝 """ a = 7 b = a a = 8 print(b) lst1 = [1,2,3] lst2 = lst1 ...

  9. android的文件操作

    http://blog.csdn.net/fenghome/article/details/5668598 android的文件操作要有权限: <uses-permission android: ...

  10. 困惑我的x++和++x；

    刚学习C语言时X++和++X非常不解 目前有了新的领悟 1.X++ int x=0; int z=x++; 此时z?x? 这个问题可以分两步思考 第一步:先把x的值赋予z,此时z=x=0; 第二步:x ...