テンプレートとは何ですか
< div要素のid = 'アプリ' > < divの> < 入力Vモデル= "タイトル" /> < ボタンVオン：クリック= "追加" >提出する</ ボタン> </ divの> < UL > < 李V-用=「リスト内の項目」> {{項目}} </ 李> </ UL > </ DIV >
これはテンプレートで、テンプレートは、それは何ですか？
1は、文字列はちょうどHTMLのように、存在している、基本的に文字列です。
2、
ロジックがある
、などのような裁判官、これらのサイクルとして、V-場合V-用というように、それは論理的なものになるかどうか、何のロジックが書き込む前に存在しない、HTML
HTMLなどの形式の3、が、非常に異なります。最初の
HTML構文V-場合、V-のためにこれらの中で認識されていません
。第二は、全く論理HTML静的でない、
VUEは、動的論理です。彼らはただ形式のようなものです
4、しかし最終的にはまだ表示されるHTMLテンプレートを変換する必要があります。それでは、どのように彼はそれを行うのですか？
まず、最終的なテンプレートがあるため、jsのコードに変換する必要があります。
最初の論理テンプレート、V-場合は、V-のために、あります。JSを使用する（チューリング完全言語）を実装する必要があります
ページをレンダリングするために、HTMLへの2番目のテンプレートは、JSを使用するために実装する必要があります
したがって、テンプレートは、最終的に（つまり、レンダリング機能を機能をレンダリング）JS関数に変換すること
まず、と次を理解します
そこ OBJ = { 名前： 'zhangsan' 、 年齢： 20 、 getAddress：関数（）{ 警告（ '北京' ）; } } // で行う 機能のFn（）{ 警告（obj.name）。 警告（obj.age）。 obj.getAddress（）; } FN（）; // 使用幅 関数（）{FN1 と（OBJ）{ 警告（名）; 警告（年齢）; getAddress（）; } } FN1（）;
実際の開発では、一緒に使用しないようにしよう。FNは、私たちの通常の使用です。を使用したFN1。二つは、ラップで統一されたプロパティを、書いていないとの内部と同じ効果、です。読みやすさはそれほど強くないかもしれません。
我々はいくつかの単純なテンプレートを見ます
< DIV ID = "アプリケーション" > < P > {{価格}} </ P > </ DIV >
このテンプレート関数は次のように最終的に生成されます
/ * * * _C：ラベルDOMを作成します。 * _V：テキストノードを作成します。 * _s：のtoString * / 機能（）{レンダリング で（この）{ // この就是のVMの リターン_c（ '<DIV>' 、 { ATTRS：{ "ID"： "アプリケーション" } }、 [ _c（ 'P' 、[_ V（_s（価格））]） ] ） } }
これは、このは、このインスタンスのVMで、この_cは、ラベルを作成するために使用さvm._c、DOMです。最初のパラメータはdiv要素です。2番目のパラメータは属性を持つオブジェクトオブジェクト、です。第三のパラメータは、アレイは、アレイは、唯一つの要素、確かvm._cこの_cがあります。_C最初のパラメータがpであり、2番目のパラメータは、アレイ、_Vある配列、（_s（価格））であり、そこでは、価格は確かであるvm.priceだdata.priceあります。そして、それはvm._sある_sの前に、ToString関数です。_vまた、テキストノードを作成するために使用される、vm._v。
要約：
すべてのテンプレートの情報は、レンダリング機能に含まれています。
この即VM
this.price即vm.price即のdata.price即価格。
それthis._cすなわちvm._c _c
機能をレンダリング
私はレンダリング機能をどこで見ることができますか？
レンダリング機能のTODOリストのデモを見てください
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > < タイトル>ドキュメント</ タイトル> </ ヘッド> < 身体> <！ ID = "アプリ" > < 入力Vモデル= 'タイトル' /> < ボタンVオン：クリックする= '追加' >提出する</ ボタン> < ulのV-用= 'アイテムのリストで' > {{項目}} </ UL > </ DIV > <！ - 源码- > < スクリプトSRC = "./ VUE-2.6.10.js" > </ スクリプト> < スクリプト> のvar データ= { タイトル：'' 、 リスト：[] } // 初期化し、インスタンスVUEの VAR VM = 新しい新しいヴュー（{ 上：' #app ' 、 日付：日付、 方法：{ 追加：関数（）{ この.list.push（この.TITLE）。 この.TITLE = '' } } }） </ スクリプト> </ ボディ> </ HTML >
そして、この例を、それをプリントアウトし、それがソースコード検索code.renderでどのようなものであったかの機能をレンダリングするVUEを見て
（この）{ リターン _c（ 'div要素' 、
{ ATTRS：{ "ID"： "アプリ" } }、 [ _c（ '入力' 、
{ ディレクティブ：[{ // タイトルの変更は、値は、入力に応じて、に割り当てられたとき 名前：「モデル」、 rawName： "Vモデル" 、 値：（タイトル）、 表現：「タイトル」 }]、 domProps：{ "値" ：（タイトル） }、 ON：{ // 内部のデータ入力の変更、イベントに耳を傾け、それがタイトルに割り当てられます 「入力」：機能（$イベント）{ IF（$ event.target.composing）リターン。 タイトル = $ event.target.value } } }）、 _v（ "" ）、 _c（ 'ボタン' 、 { 上：{ 「クリック」：追加 } }、 [_v（ "提出" ）] ）、 _v（ "" ）、 _L（ （リスト）、 関数（アイテム）{ 戻り _C（ 'UL'、[_v（ "\ n" + _s（項目）+ "の\ n" ）]） } ） ]、 2 ） }
それはこのようなものです。これは、レンダリング機能に対応するデモです。第二引数の入力を作成する場合がありディレクティブ。コマンドと呼ばれ、コマンド名がモデルです。値はvm.titleあるタイトルです。vはテキストノードの作成を表し、主に入力し、ボタンを押してラップを持っている、いない場合はラップ_vの後ろに（「」）、_、空のテキストノードを作成するために、そこに_Vされるだろう。_Lは、Liを返されるリストのラベルの配列です。
