详解VueJs异步动态加载块


Posted in Javascript onMarch 09, 2017

首先定义组件为异步加载

define(['jquery','vue'],function($,Vue){ 
  Vue.component('comp1',function(resolve){ 
    require(['component/comp1'],resolve); 
  }); 
  Vue.component('comp2',function(resolve){ 
    require(['component/comp2'],resolve); 
  }); 
  var b = new Vue({ 
    el:"#app", 
    data:{ 
      currentView:'comp1' 
    }, 
    methods:{ 
      toggleView:function(){ 
        console.log(this.currentView); 
        this.currentView = this.currentView=='comp1'?'comp2':'comp1'; 
      } 
    } 
  }); 
})

具体可以参考vuejs的异步组件和动态组件。然后是html里面的代码

<div id="app"> 
    <keep-alive><!-- 使用keep-alive可以让动态被切出去的组件继续保存在内存中(只是隐藏看不到),却回来之后会继续之前的状态和数据 --> 
    <component v-bind:is="currentView"></component> 
    </keep-alive> 
    <button type="button" v-on:click="toggleView">切换view</button> 
  </div>

这种结构的好处是,页面初始化加载的时候只会加载需要的那个组件相关的内容,没切换到的那个组件不加载,使页面加载的速度加快。同时,每个组件加载过一次之后切换出再切回来不会重复加载相关内容和重复执行渲染

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
vue购物车插件编写代码
Nov 27 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 #Javascript
js实现登录框鼠标拖拽效果
Mar 09 #Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 #Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 #Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 #Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 #Javascript
微信小程序 五星评价功能的实现
Mar 09 #Javascript
You might like
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
Python中的Numpy矩阵操作
2018/08/12 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
计算机专业毕业生求职信
2014/04/30 职场文书
英文演讲稿
2014/05/15 职场文书
公司委托书格式范文
2014/10/09 职场文书
画展邀请函
2015/01/31 职场文书
幼儿园开学通知
2015/04/24 职场文书
计划生育目标责任书
2015/05/09 职场文书
盗窃案辩护词
2015/05/21 职场文书
离职证明范本
2015/06/12 职场文书
在校证明模板
2015/06/17 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS