詳解VueJs異步動態(tài)加載塊
更新時間：2017年03月09日 10:31:04 作者：daelly
本篇文章主要介紹了VueJs異步動態(tài)加載塊，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
首先定義組件為異步加載
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的異步組件和動態(tài)組件。然后是html里面的代碼
<div id="app">
<keep-alive><!-- 使用keep-alive可以讓動態(tài)被切出去的組件繼續(xù)保存在內(nèi)存中（只是隱藏看不到），卻回來之后會繼續(xù)之前的狀態(tài)和數(shù)據(jù) -->
<component v-bind:is="currentView"></component>
</keep-alive>
<button type="button" v-on:click="toggleView">切換view</button>
</div>
這種結構的好處是，頁面初始化加載的時候只會加載需要的那個組件相關的內(nèi)容，沒切換到的那個組件不加載，使頁面加載的速度加快。同時，每個組件加載過一次之后切換出再切回來不會重復加載相關內(nèi)容和重復執(zhí)行渲染
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了Vue組件的層級關系，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認hash模式，本文講給大家詳細分析Vue路由Hash模式，文中有相關的代碼示例供大家參考，感興趣的同學可以借鑒一下2023-06-06
這篇文章主要為大家總結了vue2.0開發(fā)實踐的疑難,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細介紹了Vue.js創(chuàng)建Calendar日歷效果的過程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了通過vue如何設置header,每個項目都有頭部但是內(nèi)容不一樣;這種情況我們可以考慮在app.vue中創(chuàng)建公共頭部，那么怎么配置公共頭部header，下面小編通過實例代碼詳細講解，需要的朋友可以參考下2023-02-02
Element-UI表格嵌入popover遇到的問題及解決方案
在表格中我們通常需要在每一行的一些單元格中顯示popover,這篇文章主要給大家介紹了關于Element-UI表格嵌入popover遇到的問題及解決方案,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關于Vue中引入svg圖標的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
本篇文章主要介紹了Vue響應式原理詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
element-ui中導航組件menu的一個屬性:default-active說明
這篇文章主要介紹了element-ui中導航組件menu的一個屬性:default-active說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
今天小編就為大家分享一篇對vue中v-on綁定自定事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09