VUEスロットの使用（オタクVueの時間のビデオノート）

VUEスロット

スロットは、複雑な、同様の方法の内容を転送するために使用されています

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換" コンテンツ= "IE =縁" > 
    < タイトル>ドキュメント</ タイトル> 
</ ヘッド> 

< ボディ> 
    <
        < TODO-一覧> 
            < TODOアイテム-のV-用= "項目CLASSLISTで" ：タイトル= "item.title" ：賞= "item.prize" > 
                <！ - javaのに似てAOP内のコンテンツの配信、
                //スロットの使用後のバージョン2.5 - > 
                < テンプレートV-スロット：プリアイコン> 
                        < スパン>プリスロット</ スパン> 
                </ テンプレート> 
                <！ - バージョン2.5の使用の前に- > 
                < スパンスロット= "SUFアイコン" >リアスロット</ スパン> 
            </ TODO項目> 
        </TODOリスト> 
    </ divの> 

    < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ スクリプト> 
    < スクリプト> 
        Vue.component（' TODO項目' 、{ 
            小道具：{ 
                タイトル：文字列、
                賞：{ 
                    タイプ：Number、
                    デフォルト：40 
                } 
            } 
            // 默认插槽
            テンプレート： ` < リチウム> 
            < スロット名= "事前アイコン" > < / スロット> 
            < ボタン> 删除< / ボタン> 
                课程名：{{タイトル}} 
                价格：{{賞}} 
                < スロット名= " SUFアイコン" > < / スロット> 
                < スロット> < スパン> 默认插槽< / スパン> < / スロット> 
            < / LI> `、
            データ：関数（）{
                 リターン{ 
                    
                } 
            }、
            方法：{
            }
        }）
        Vue.component（' TODOリスト' 、{ 
            テンプレート： ` 
            < UL > 
            < スロット> < / スロット> 
        < / UL> 
            `、

            データ：関数（）{
                 リターン{ 

                } 
            } 
        }）
        VaRのVM =  新しいヴュー（ { 
            エル：' .appを' 、
            データ：{ 
                メッセージ：' こんにちは世界'、
                ShowMessage：falseに、
                タイトル：" 削除" 、
                CLASSLIST：[ 
                        { 
                            タイトル：' コース1 ' 、
                            賞：50 

                        }、
                        { 
                            タイトル：' コース2 ' 、
                            賞：80 
                        } 
                    ] 
            }、
            方法：{ 
            } 
        }）
    </ スクリプト> 
</ ボディ> 

</ HTML >