异步组件加载

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

<!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. Pytorch【直播】2019 年县域农业大脑AI挑战赛---初级准备(一)切图

    比赛地址:https://tianchi.aliyun.com/competition/entrance/231717/introduction 这次比赛给的图非常大5万x5万,在训练之前必须要进行数 ...

  2. Duilib自定义控件

    新版博客已经搭建好了,有问题请访问 htt://www.crazydebug.com 在公司二期项目中为了将谷歌内核嵌入到duilib中,采用了自定义duilib控件的方法,由于也是第一次用duili ...

  3. JS中的鼠标移入移除监控操作

    有些时候我们需要通过页面来监控用户的行为,包括鼠标操作键盘操作,本文章介绍的是鼠标的操作监控: <script> window.onload = function(){ var oDiv ...

  4. Python递归函数如何写？正确的Python递归函数用法！

    在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数.一.举个例子,我们来计算阶乘n! = 1 x 2 x 3 x … x n,用函数fact(n)表示,可以看出:fac ...

  5. 068、Java面向对象之声明两个对象

    01.代码如下: package TIANPAN; class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 public ...

  6. 2. 引用计数法(Reference Counting)

    1960年,George E. Collins 在论文中发布了引用计数的GC算法. 引用计数法意如了一个概念,那就是"计数器",计数器表示的是对象的人气指数, 也就是有多少程序引用 ...

  7. Redis的下载与安装

    1). 从官网上下载Redis的压缩包   2). 将压缩包解压到 某个指定的文件目录中         tar -xzvf redis-4.0.9.tar.gz  /xx/xx/xx_dir   3 ...

  8. 个人项目发表到GitHub

    个人项目源程序代码发送到github上. 因为之前假期已经注册过了账户,所以只是上传了做过的小账本项目. https://www.cnblogs.com/sdcs/p/8270029.html

  9. Windows驱动开发-r3和r0通信

    用户部分代码: int main() { HANDLE hDevice = CreateFile(L, NULL, OPEN_EXISTING, FILE_ATTRIBUTE_NORMAL, NULL ...

  10. VUE - 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

     created() {     var that=this     axios.get('http://jsonplaceholder.typicode.com/todos')     .then( ...