クラスVueの{ コンストラクタ（オプション）{ この。$ EL = options.el; // ノード要素を取得し 、この $ DATA = options.data ;. // データを取得 // ノードが空の要素がない場合 IF（この$ EL。）{ 新しい新しいオブザーバー（この $データ。）; // データハイジャック 新しい新しいコンパイラ（この）; // 解析仮想ノードがメモリに、DOMなります } } } クラスオブザーバー{ 構造（日付）{ この.observer（データ）。 } オブザーバー（データ）{ // オブジェクトか否かを判断する IF（データ&& typeof演算データ== 'オブジェクト' ）{ ため（LETキーでデータ）{ この .reactive（キー、DATA [キー]、データ）; // キープロパティデータハイジャックを結合するための } } } 反応（キー、値、データ）{ この .observer（値）; // ネストされた再帰的にサブ属性のハイジャック Object.defineProperties（データ、キー、{ 取得する（）{ 戻り値; }、 セット：newValueに => { // もし（！newValueに= 値）{ 値 = newValueに。 この .observer（newValueに）; // オブジェクトが再びハイジャック新しいオブジェクトの新しい値である場合 } } }） } } クラスコンパイラ{ コンストラクタ（VM）{ この .vm = VM; // 裁判官ELは要素ノードまたは要素のIDです 。この .EL = この .isElementNode（VM $エル。）？エル：document.querySelector（エル）; LET fregment = この .getChildNodes（この .ELを）; // メモリに子要素 // バインドするデータテンプレートの構文変換し 、この.compilerToData（fregmentを）。 } compilerToData（fregment）{ // 変換を開始 [... fregment.childNodes] .forEach（子供=> { //は、子ノードの種類を決定する要素またはテキストノードである IF （isElementNode（子））{ この .compilerElementNode（子）; // 変換要素ノード この .compilerToData（子）; //は再帰的に以上の子供のすべてを見つける } 他{ この .compilerTextNode（子）; // 変換テキストノード } }） } compilerElementNode（ノード）{ それはLET属性 = node.attributesを; //は、属性ノードはまた、配列のクラスである属性 .forEach（ATTR => [...属性] { {LETに名前を付ける：vueDirect、値：エクスプレス} = ATTR; // Vモデル=「JSC」オブジェクト構造は、新しい変数名に割り当てられた属性の代表値の後ろにコロン //は命令属性VUEか否かを判断する IF（本。 isVueDirect（vueDirect））{ LET【、vueDirect] = vueDirect.split（ " - "）// "V-モデル"のオブジェクト構造、それが再び分割ない CompilerMapUtil [vueDirect（ノード、この .vm、エクスプレス）; // CompilerMapUtilは、マッピング関係であります異なるVUE異なる解析処理命令対応し } }） } compilerTextNode（ノード）{ TextContentは聞かせ ; = node.textcontent // テキストを取得 IF（/\{\{(.+?)\}\}/ .TEST（のTextContent））{ CompilerMapUtil [ "テキスト" ]（ノード、VM、のTextContent） } } isVueDirect（名前）{ もし（name.startsWith（ "V-" ））{ 戻り 真。 } リターン はfalse ; } GETCHILDNODES（EL）{ 聞かせてfregment = document.createDocumentFragment（）; firstChilNodeをしましょう。 // 巻き取りが完了するまでメモリに子ノードを取る時間 しばらく（firstChilNode = el.firstChild）{ fregment.appendChild（firstChilNode）。 } リターンfregment。 } isElementNode（ノード）{ リターン node.nodeType === 1 。 } } // VUEコマンド解析処理及びマッピング関係 CompilerMapUtil = { モデル（ノード、vueObject、発現）{ //は（：11111、値が表現JSC JSC）対象のVM VUEモデルからの変数名の属性に応じてフェッチ、発現 させmodelValue = これ以降.getvalue（vueObject、発現します）。 LET FN = この .updater [「modelUpdater」] // 取得モデルの割り当てに対応する方法指示 FN（ノード、modelValue）; // オブジェクトVUE入力ボックスに割り当てられた値 } テキスト（ノード、vueObject、コンテンツ）{ // 正規表現gはすべて} {置き換えない見つけることを意味し、グローバル意味 // 表記法を使用するよう...パラメータを残りの引数は、引数は配列データ型の変数の配列に変換することができる、NOの矢印の関数引数ために受信引数 せのTextContent = content.replace（/\{\{(.+?)\}\}/ G、（引数...）=> { // 5つのパラメータを設定することができるコールバックを交換し、機能を最初のパラメータは、サブストリングマッチングパターンである。第二のパラメータは、パターンマッチングの部分式のサブストリングである // 引数最初のパラメータは、正規表現マッチングは{{JSC}}は、第二のパラメータでありますJSCの部分式の一致が 返さ この以降.getvalue（vueObject、引数[1 ]）。 }） LET FN = この .updater [「textUpdater」] // ノード割当方式に対応するテキスト取得 FN（ノードのTextContentを）; // 割り当てのため } getValue（vueObject、エクスプレス）{ // ここでExpressはjsc.name（= Vモデル「jsc.name」） // データオブジェクトの最初のパラメータとしてトラバース[JSC、名前]配列、及びVUEデータを減らす // すべて次のパラメータデータオブジェクトの戻り値として （「」）express.split（（データオブジェクト、currentKey）=>減らす。{ 戻り[currentKey】データオブジェクトを、 }、vueObject。$データ） }、 アップデータ：{ modelUpdater（ノード、modelValue）{ node.value = modelValue。 }、 textUpdater（ノード、modelValue）{ node.textcontent = modelValue } }、 用{（） }、 もし{（） } }