Vueのレンダリング機能

Vueのは、ほとんどの場合、あなたのHTMLを作成するためのテンプレートを使用することをお勧めします。しかし、いくつかのシナリオでは、完全にプログラム可能な、あなたは本当に、JavaScriptの機能を必要としています。そして、あなたはレンダリング機能を使用することができ、それはテンプレートコンパイラよりも近いです。

プロジェクト構造

二つのアプリケーションコンポーネント

<テンプレート> 
  の<divのid = "アプリ" > 
    <フルーツfruitName = "ドリアン"：レベル= "2" > 
      非常においしいです！
    < /果物> 
  < / div> 
< /テンプレート> 

<スクリプト> 輸入"./components/Fruit.js" 。
輸出のデフォルト{ 
  名：「アプリケーション」
}; < /スクリプト> 
<スタイルLANG = "SCSS" > 
< /スタイル>

スリーフルーツコンポーネント

インポートからVueの「VUE」。
インポートからドリアン「./Durian.vue」。
インポートからMongoの「./Mongo.vue」。

Vue.component（"果物" 、{ 
  小道具：{ 
    fruitName：{ 
      タイプ：文字列、
      必須：真
    }、
    レベル：{ 
      タイプ：番号、
      必要：真
    } 
  }、
  データ（）{ 
    リターン{ 
      ショップ："水果店" 
    } ; 
  }、 
  {（のcreateElement）をレンダリング
    CONST {fruitName、レベル、ショップ、$スロット、nativeClickHandler} = この; 
    constのELE = fruitName === "ドリアン"？ドリアン：モンゴ。
    返すのcreateElement（
      ELE、
      { 
        クラス：{ 
          favorFruit：真は
        }、
        スタイル："色：ゴールド;フォントスタイル：イタリック;" 、
        attrsに：{ 
          ID："favorFruit" 
        }、
        nativeOn：{ 
          クリックしてください：nativeClickHandler 
        }、
        scopedSlots：{ 
          ショップ（小道具）{ 
            リターンcreateElement（"H6"、ショップ）; 
          }
        } 
      }、
      [のcreateElement（"H" +レベル、fruitName）、$スロット。デフォルト] 
    ）; 
  }、
  メソッド：{ 
    nativeClickHandler（）{ 
      にconsole.log（"ネイティブクリック" ）。
    } 
  } 
}）。

ドリアン四つの成分

<テンプレート> 
    の<div> 
        <スロット/ > 
        <スロット名= "店舗" / > 
    < / div> 
< /テンプレート> 
<スクリプト> 
エクスポートデフォルト{ 
  名："ドリアン" 
}。
< /スクリプト>

Mongoの5つの要素

<テンプレート> 
    の<div> 
        <スロット/ > 
        <スロット名= "店舗" / > 
    < / div> 
< /テンプレート> 
<スクリプト> 
エクスポートデフォルト{ 
  名："マンゴー" 
}。
< /スクリプト>

シックス・業績

おすすめ