2. 程式人生 > >Vue異步組件Demo

Vue異步組件Demo

阿新 • • 發佈：2018-11-15
== html中 必須 list urn var com resolve sde

Vue異步組件Demo

在大型應用中，我們可能需要將應用拆分為多個小模塊，按需從服務器下載。為了進一步簡化，Vue.js 允許將組件定義為一個工廠函數，異步地解析組件的定義。Vue.js 只在組件需要渲染時觸發工廠函數，並且把結果緩存起來，用於後面的再次渲染。

下面是我寫的一個簡單Vue異步組件Demo。

index.html


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible"
            content="ie=edge">
        <title>Document</title>
        <script>
            // 如果瀏覽器不支持Promise就加載promise-polyfill
            if ( typeof Promise === 'undefined' ) {
                var script = document.createElement( 'script' );
                script.type = 'text/javascript';
                script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
                document.head.appendChild( script );
            }
        </script>
        <!-- 引入Vue -->
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>

    <body>
        <div id="app" style="font-size: 22px">
            <!-- 異步組件async-comp -->
            <async-comp :list="['我是一個異步組件，','如果加載完成，','我就會在這裏顯示']"></async-comp>
        </div>

        <!-- 引入main.js     -->
        <script src="/main.js"></script>
    </body>

</html>

異步組件Async-Comp.js，

  • 註意，Async-Comp.js並沒有在index.html中引用，而是在下面的main.js中動態加載。

window.async_comp = {
    template: '        <ol>            <li v-for="item in list">{{ item }}</li>        </ol>',
    props: {
        list: Array
    }
};

main.js


var vm = new Vue( {
    el: '#app',
    components: {
        /* 異步組件async-comp */
        'async-comp': function () {
            return {
                /** 要渲染的異步組件，必須是一個Promise對象 */
                component: new Promise( function ( resolve, reject ) {
                    var script = document.createElement( 'script' );
                    script.type = 'text/javascript';
                    script.src = '/Async-Comp.js';
                    document.head.appendChild( script );

                    script.onerror = function () {
                        reject( 'load failed!' );
                    }

                    script.onload = function () {
                        if ( typeof async_comp !== 'undefined' )
                            resolve( async_comp );
                        else reject( 'load failed!' )
                    }
                } ),
                /* 加載過程中顯示的組件 */
                loading: {
                    template: '<p>loading...</p>'
                },
                /* 出現錯誤時顯示的組件  */
                error: {
                    template: '                        <p style="color:red;">load failed!</p>                    '
                },
                /* loading組件的延遲時間 */
                delay: 10,
                /* 最長等待時間，如果超過此時間，將顯示error組件。 */
                timeout:3200
            }
        }
    }
} )

see github

原文地址：https://segmentfault.com/a/1190000012561857

Vue異步組件Demo

相關推薦

Vue異步組件Demo

== html中 必須 list urn var com resolve sde Vue異步組件Demo 在大型應用中，我們可能需要將應用拆分為多個小模塊，按需從服務器下載。為了進一步簡化，Vue.js 允許將組件定義為一個工廠函數，異步地解析組件的定義。Vue.js 只在

在Java Web Project中實現Vue異步組件加載

ati 解析器 webapp ast 文件 要求 dir win sha 背景 最近看上了ElementUI（Vue實現）用來實現一個管理系統Demo，其中一個最常見的需求就是左側導航不動，右側主頁塊在點擊導航菜單時動態更新，如下圖所示：之前的實現方案是右邊嵌入一個ifra

Vue 異步組件

export rip exp 類型 develop 內容 rom web eset 最近在做一個 Vue 項目的時候，突然發現了一個有意思的知識點。 有幾位客服反饋說在點擊某個鏈接跳轉的時候，老是沒得反應，導致選不了選項。我就很奇怪，內網環境下是沒有問題的，所以代碼出問題的

Vue動態加載異步組件

rec 完成 hub 結果 put root sha -a edi 背景： 目前我們項目都是按組件劃分的，然後各個組件之間封裝成產品。目前都是采用iframe直接嵌套頁面。項目中我們還是會碰到一些通用的組件跟業務之間有通信，這種情況下iframe並不是最好的選擇，ifram

webpack 的異步組件 生成commonchunks

ext keys bpa node ide extra pack 發現 commons 1 new webpack.optimize.CommonsChunkPlugin({ 3 async: ‘async-common‘, 4 mi

異步組件

timeout 多個 渲染 拆分 函數 緩存 一個 n) 簡單 在大型應用中，我們可能需要將應用拆分為多個小模塊，按需從服務器下載。為了讓事情更簡單，Vue.js允許將組件定義為一個工廠函數，動態的解析組件的定義。Vue.js只在組件需要渲染時觸發工廠函數，並且把結果緩存起

Vue.js 子組件的異步加載及其生命周期控制

creat vue nor 其中 pmo dem con tor pan 前端開發社區的繁榮，造就了很多優秀的基於 MVVM 設計模式的框架，而組件化開發思想也越來越深入人心。這其中不得不提到 Vue.js 這個專註於 VM 層的框架。 本文主要對 Vue.js 組件化開發

vue子父組件的通信

.com lis span imp return http cti margin nis 1、父組件像子組件傳值 a、app.vue父組件 <template> <div id="app"> <h1>{{title}}<

發現一個vue的UI組件庫

tar doc lan -c 一個 com 適合 ref http Mint UI 項目主頁:http://mint-ui.github.io/#!/zh-cndemo:http://elemefe.github.io/mint-ui/#/github地址:https://

vue 中父子組件傳值：props和$emit

port 參數 cti 組件 code lan func ssa app 1 父組件向子組件傳值：通過props數組： //父組件 App.vue <template> <div id="app"> <hello mes-fath

vue 引用其他組件

return div 技術 mit scrip gin 跳轉 pad port 1、在components 目錄下新建Test.vue 文件 <template> <div class="test"> <h1>{{ msg

vue的動畫組件（transition）

pri span title cancel href 我們 匹配 導航 cnblogs 當插入或刪除包含在 transition 組件中的元素時，Vue 將會做以下處理： 自動嗅探目標元素是否應用了 CSS 過渡或動畫，如果是，在恰當的時機添加/刪除 CSS 類名。 v-e

五、vue常用UI組件

http view -m 餓了麽 ocs mef ron and har 下面簡單的總結下vue常用的一些UI 組件,有一些我也沒怎麽用過，這裏先羅列出來，便於自己後面使用的時候查找方便，大家有更好的可以給我推薦哦~ vuex: vux github ui demo:ht

vue中父子組件的通信

method data ati 替換 .html dispatch ldm prop ren 1、父組件向子組件傳遞數據 　　父組件傳遞:data = parent.data 　　子組件接收props: {data:{}} 2、子組件向父組件傳遞數據（https://vue

Webpack+Vue+ES6 前端組件化開發mobile-multi-page應用實戰總結

basename and import tran alert nal 否則 push 列表 本文版權歸博客園和作者吳雙本人共同所有 轉載和爬蟲請註明原文地址 www.cnblogs.com/tdws 一.寫在前面 項目上線有一段時間了，一個基於webpack+vue

vue-router2.0組件復用

舉例 由於 被調用 檢測 參考 zh-cn 動態 如果 渲染 在使用vue-router1.x時我們知道對於路由 a/b/c 和 a/b/d , 組件a和組件b將會復用 。具體可以參考：https://github.com/vuejs/vue-router/blob/

vue 基礎重要組件 模板指令 事件綁定

渲染 strong -h v-on ext ons color show 保存 組件：data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; }

vue非父子組件通信

關於 nts mit data cti 如何 flow clas -s 關於vue非父子組件如何通信，今天做了一個基本的例子，記錄下來。 使用一個空的vue實例作為事件的總線 html代碼：<div id="app"> <a-component&g

vue復合組件----註冊表單

pre one log class -c ext har logs emp <!doctype html> <html> <head> <meta charset="UTF-8"> <title><

vue非父子組件之間值傳遞

eve return 傳遞 deb imp disable rom data ble 非父子之間通過一個空的vue實例作為事件總線，相當於一個中轉站。這個中轉站是所有組件都可以看到的，大家通過這個中轉站接收和觸發事件。 import Vue from ‘vue‘ impo