　　また、あなたはHTMLテンプレートを作成することができ、Vueのも、レンダリング機能やJSXを提供し、かつての自由度の高さをコードする、後者が反応に働いた人々によく知られています。注、Vueのテンプレートは、最終的にレンダリング機能にコンパイルされます。

レンダリング機能

　　シナリオのほとんどは、テンプレートを選択し、直感的かつ明確な、いくつかの複雑なシナリオに遭遇しますが、あなたは（レンダリングレンダリング機能を使用する必要があります）。

1））（レンダリング

　　そのテンプレートに示すように、選択されレンダリングされた、それが入ってくるタイプの外部特性に応じます、ページ・コンポーネントを仮定する。

< スクリプトタイプ= "テキスト/ X-テンプレート" ID = "テンプレート" > 
  < H1 V - もし= " タイプ== 1 " > 
    < スロット> < / スロット> 
  < / H1> 
  < H2 V - そう- もし= " タイプ== 2 " > 
    < スロット> < / スロット> 
  < / H2> 
  < h3のV - 他の- もし= "タイプ== 3 " >
    < スロット> < / スロット> 
  < / H3> 
</ スクリプト> 
< スクリプト> 
  Vue.component（" ページ" 、{
    テンプレート：' #template ' 、
    小道具：[ " タイプ" ]
  }）;
</ スクリプト>

　　テンプレートには、完全な冗長性<スロット>要素、および分岐が増加した場合、そのテンプレート、すなわち挿入新しい条件付き命令、およびtitle要素スロットを変更する必要があります。このシナリオでは、適切なテンプレートではないで、明らかに、次に（）メソッドをレンダリング置き換え以下に示すように、コードは、単純なだけでなく、維持することが容易ではないだけです。

Vue.component（ "ページ" 、{
  ：レンダリング機能（のcreateElement）{
     リターンのcreateElement（
       "H" + この.TYPE、
       この $スロットを。。デフォルト
    ）;
  }、
  小道具：[ "タイプ" ]
}）;

　　レンダリング（）関数はVNODEを返すためのcreateElement（）メソッドを受信することができます。Vueの高性能仮想DOM DOMに真の変化が、短いVNODE仮想ノード（仮想ノード）があります。$スロットインスタンス属性は、キースロットの名前であるオブジェクト、アクセス可能なコンテンツ分散型スロット、コードスロットデフォルトデフォルトの手段です。

　　レンダリング（）関数が存在する場合、Vueのはコンパイルテンプレートテンプレート内のオプションとエルのオプションから抽出されたテンプレートはレンダリング機能に変換していない要素が搭載されていないことに注意してください。

2）のcreateElement（）

　　タグ名、および仮想データ・オブジェクトの子ノード：この方法は、3つのパラメータを受信することができます。ラベル名のほかに渡し、残りの2つのパラメータを説明するためのオプション、次回の三つのパラメータ一つずつあります。

　　タグ名は、文字列のいずれかになります、または文字列を返す関数であってもよいです。下記に示すようにレンダリング（）関数は、これをアクセスすることができるので、このようにタグのname属性データもオプションであってもよいし、計算属性。

Vue.component（ "BTN" 、{
  レンダリング：機能（のcreateElement）{
     リターンのcreateElement（
       この.TAG
    ）;
  }、
  データ：関数（）{
     リターン {タグ： "ボタン" }
  }
}）;

　　データオブジェクトは、構成情報の集合は、スタイル、スロット、REF、カスタムコマンド、イベント、および他の小道具などの所望のDOM要素は、以下の専用データオブジェクトのフィールドの一部を示しコンポーネントの属性及び特徴および特性を備えています。

Vue.component（ "BTN" 、{
  レンダリング：関数（のcreateElement）{
     リターンのcreateElement（この.TAGを、{
      スタイル：{カラー： "赤"}、                 // およびV-バインド：スタイルと同じ機能を 
      attrsに：{ID： "BTN"}、                    // DOM要素特性 
      domProps：{innerHTMLプロパティ： "送信"}、          // DOM要素属性 
      ：{クリック：ON この .handler}              // イベントリスナー
    ;}）
  }、
  方法：{
    ハンドラ：関数（）{
      console.log（ "クリック" ）;
    }
  }
}）;

　　以下に示すようにVUEはまた、イベントにオプションのプレフィックスを対応.passive、.captureと.once 3つの修飾子が設けられ。

上：{
   "＆クリック"：この .handler、         // .passive 
  "クリック！"：この .handler、         // .capture 
  "〜をクリック"：この .handler          // .once 
}

　　以下に示すように仮想サブノードは、文字列またはアレイのいずれかであり得ます。データオブジェクトのニーズが省略される場合、そのノート、2番目のパラメータとして、次に直接仮想サブノード。

Vue.component（ "C-記事" 、{
  レンダリング：機能（のcreateElement）{
     リターンのcreateElement（
       "DIV"を、
      [ "タイトル"、のcreateElement（ "H2"、 " 字幕" ）]
    ）;
  }
}）;

　　このように同じVNODEを次のように繰り返し参照は正当ではないが、本コンテンツのことができるように、まだレンダリング時に文句はありませんが、すべてのvnodeは公式のコンポーネントツリーは、一意である必要があります。

Vue.component（ "C-記事" 、{
  レンダリング：関数（のcreateElementを）{
     VAR H1 =のcreateElement（ "H1"、 "标题" ）。
    返すのcreateElement（
       "DIV"を、
      [H1、H1]
    ）;
  }
}）;

二、JSX

　　あなたはJSX構文のVueを使用している場合は、以下に示すようにプラグインバベル、installコマンドをインストールする必要があります。

NPMインストール@ VUE /バベル・プリセット・JSX --save-devの

　　以下に示すようにインストールした後、コンフィギュレーション・ファイルは、babel.config.jsに構成することができます。

module.exportsは= {
  プリセット：[ "@ VUE /バベル・プリセット・JSX" ]
}。

　　以下に示すように一連の操作の後、我々は、ボタンクリックイベントのために登録し、テンプレートを作成することがJSX構文のことができるようになります。メモ、Hパラメータはレンダリング（）関数のcreateElementの別名です。

Vue.component（ "BTN" 、{
  レンダリング：関数（H）{
     リターン（<ボタンVON：クリック= { この .handler}> OK </ボタン>）。
  }、
  方法：{
    ハンドラ：関数（）{
      console.log（ "クリック" ）;
    }
  }
}）;

　　上記のコードはDefault.jsにし、ディレクトリ内の現在のファイルに格納されているとし、これをコンパイルするには、次のコマンドは、現在のディレクトリdist.js.のファイルにコンパイルされたコードが保存されます

NPXバベルデフォルトの.js --out-ファイルdist.js

　　以下に示すdist.jsファイル・コードは、コードが自動的にその一部JSXのcreateElement（）メソッドに変換されます。

Vue.component（ "BTN" 、{
  レンダリング：機能（H）{
     戻り時間（ "ボタン" 、{
       "上" ：{
         "クリック"：この.handler
      }
    }、[ "OK" ]）。
  }、
  方法：{
    ハンドラ：関数（）{
      console.log（ "クリック" ）;
    }
  }
}）;

Vueの練習は、ノート（7）に不可欠である - レンダリング機能とJSX

レンダリング機能

二、JSX

おすすめ