VUE-ロード図。

アドレスへのSrc親コンポーネントサブアセンブリ。

列（）{
      戻り[
         { ' タイトル'：' 图片'、' キー'：' IMG ' 、レンダリング（H、{行}）{
              戻り時間（LoadingImg、{
                 小道具：{ // これらのサブアセンブリを通過
                     ' W '：80 、
                      ' H '：45 、
                      ' SRC '：' http://192.168.2.233/carimages_small/ ' + row.id + ' /ビュー/ ' + row.img
                 }
             }）;
         }}、
         { ' 題名'：' 番号'、' キー'：' ID ' }、
         { ' タイトル'：' ブランド'、' キー'：' ブランド' }、
         { ' タイトル'：' 车系'、' キー'：' シリーズ' }、
         { ' 題名'：' 色'、' キー'：' 色' }、
         { ' タイトル'：' 価格'、' キー'：' 価格。' }、
         { ' 題名'：' 緑'、' キー'：' 排気' }、
         { ' 題名'：' エンジン'、' キー'：' エンジン' }、
         {'title': '燃料', 'key': 'fuel'}
     ];
 }

サブコンポーネント

小道具：[ ' W '、' H '、' SRC ' ]、
    方法：{
        変化する（）{
            // 表示菊は
            この .isShowPin = trueに;
             // 仮想画像作成
            するvar IMGを= 新しい新しい画像（）;
             // SRCの設定 
            img.src = この.SRCを;
             // ロードをリッスン 
            img.onload =（）=> {
                 / / その後のためにロードされ
                、この .picurl = この.SRCを;
                 //はデイジー隠す
                この .isShowPin = falseにします。
            }
        }
    }、
// 作成する前に直接表示
作成（）{
     この.change（）。
}、
 // ロード変更後のリロード
ウォッチ：{
      SRC（）{
         この.change（）
      }
}

積載

<テンプレート>
    <DIVスタイル= " 位置：相対; "：スタイル= " { '幅' W + 'PX'、 '高さ'：H + 'ピクセル'} " >
        <IMG：スタイル= " { '幅' + 'PX' W '高'：H + 'ピクセル'} "：SRC = " picurl " >
        <スピン修正V-ショー= " isShowPin " >
            <アイコンの種類= " IOS-ロード"サイズ= 18  クラス = " デモ・スピン・アイコン・ロード" > </アイコン>
        </スピン>
    </ div>
</テンプレート>

<スクリプト> 
    輸出デフォルト{
        小道具：[ ' W '、' H '、' SRC ' ]、
        データ（）{
            リターン{
                picurl：'' 、
                isShowPin：偽
            }。
        }、
        方法：{
            変化する（）{
                // 表示菊は
                この .isShowPin = trueに;
                 // 仮想画像作成
                するvar IMGを= 新しい新しい画像（）;
                 // SRCの設定 
                img.src = この.SRCを;
                 // ロードをリッスン 
                img.onload =（）=> {
                     / / その後のためにロードされ
                    、この .picurl = この.SRCを;
                     //はデイジー隠す
                    この .isShowPin = falseにします。
                }
            }
        }、
        作成した（）{
            この.change（）;
        }、
        見る：{
            SRC（）{
                この.change（）
            }
        }
    }
</ SCRIPT>

<スタイル> 
    .demo -spin-icon- 負荷{
        アニメーション：ANI -demo- スピン1Sは無限線形。
    }
    @keyframes ANI -demo- スピン{
         から変換{：回転（値は0deg）;}
         50％  {変換：回転する（原稿180°）;}
        {変換：回転（360deg）}に
    }
    .demo -spin- COL {
        高さ：100pxに。
        位置：相対;
        国境：1pxの固体#eee。
    }
</スタイル>

私の小さなパートナーのようなマイクロチャンネル公衆番号に集中できる「フロントエンドの擬似叔父。」