详解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 相关文章推荐
可编辑下拉框的2种实现方式
Jun 13 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
vue配置多页面的实现方法
May 22 Javascript
SVG实现时钟效果
Jul 17 Javascript
深入解析ES6中的promise
Nov 08 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php常用文件操作函数汇总
2014/11/22 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PDO::rollBack讲解
2019/01/29 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
jQuery使用方法
2017/02/04 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
python实现大转盘抽奖效果
2019/01/22 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
学生档案自我鉴定
2013/10/07 职场文书
班组长竞聘书
2014/03/31 职场文书
会计求职自荐信
2014/06/20 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
创业计划书之酒吧
2019/12/02 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
Python提取PDF指定内容并生成新文件
2021/06/09 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis