详解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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
js实现图片无缝滚动
2015/12/23 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python如何进入交互模式
2020/07/06 Python
Python实现像awk一样分割字符串
2020/09/15 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
预备党员表决心书
2014/03/11 职场文书
投标服务承诺书
2014/05/28 职场文书
企业宣传工作方案
2014/06/02 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript