[Jsの]双方向のデータバインディングの原則

通常、多くの場合、入力のH1の値にバインドするなど、二つ以上の要素の間の値をバインドする必要性が発生した開発プロセスのフロントエンドでは、入力値はH1、テキストが自動的に更新、変更されました。  

<H1 ID = "タイトル">こんにちは</ H1>
<input type = "テキスト" ID = "" />
 

  最初は、入力インタフェースの値の変化、入力「入力」イベントを監視する必要があることです：

VAR入力=のdocument.getElementById（ "A"）、
      タイトル=のdocument.getElementById（ "タイトル"）;
input.oninput =関数（E）{
    title.innerHTML = this.value;
}。

 

  手動でコードにinput.valueプロパティを変更する場合は、この時点で最も従来の方法は、手動でH1テキストを更新することです：

input.value = '123'。
title.innerHTML = input.value。

  私たちの入力値の値を更新するための時間を確保する方法は、それが自動的にテキストH1を更新し、ありませんか？もちろん、我々はObject.definePropertyメソッドを使用する必要があります。

Object.defineProperty（入力、「valが」{//ここではそれ以外の場合はエラーになり、値ではなく、新しい属性名を定義する必要があります。
    取得：関数（）{
        this.valueを返します。
    }、
    セット：関数（ヴァル）{
        this.value =ヴァル;
        title.innerHTML =ヴァル;
    }
}）;

 だから我々は、valの値がinput.valueに関連付けられている、ヴァル属性の入力を追加し、我々は中にH1セッターのval内のテキストを更新するためのコードを追加して、我々は今、直接経由することができます

input.val =「良いです」。

 同時にH1とinput.valueのテキストを更新する方法

 

Object.definePropertyでデータを達成するために、このメソッドを結合双方向でのVueの核となるアイデア、さらなる詳細は方法であり、

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty