Vue2.0でデータの双方向バインディング機能をjsを使って実装する

Object.definePropertyの理解

文法：

オブジェクト.defineProperty(obj, prop, 記述子)

obj プロパティを定義するオブジェクト。
prop 定義または変更するプロパティの名前
記述子定義または変更するプロパティ記述子

objとpropは簡単に理解できます。例えば、変数を次のように定義します。

定数o = {
    名前:'xbhog'
}

このうち、objはoを参照し、propはo.nameを参照します。次に、記述子を見てみましょう。

記述子対象オブジェクトの属性のいくつかの特性（オブジェクトである）
記述子の下には6つのパラメータがあります
パラメータ1:
値: 属性値
パラメータ2:
書き込み可能: オブジェクトのプロパティ値を変更できるかどうか。True の場合は許可されます。False の場合は許可されません。
パラメータ3:
configurable: オブジェクトプロパティを削除できるかどうか。True の場合は許可されます。False の場合は許可されません。
パラメータ4:
enumerable: オブジェクトプロパティを列挙できるかどうか
パラメータ5:
get(): は関数です。プロパティにアクセスすると、関数が自動的に呼び出され、関数の戻り値がプロパティの値になります。
パラメータ6:
set(): プロパティが変更されたときに自動的に呼び出される関数です。この関数には、割り当てられる新しい値が1つだけあります。

注意: 記述子内の値属性、書き込み可能属性、および取得属性、設定属性は相互に排他的です。存在できるのは 1 つだけです。

前提条件を理解した上で、Vueでv-modelの双方向バインディングを実装してみましょう。

まず実装コードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>js による双方向データバインディングを実現する</title>
</head>
<本文>
    
<input type="text"/><br>
<h1>こんにちは: <span>データの更新</span></h1>


<!-- js を通じて双方向データバインディングを実現する -->
<スクリプト>
	// メソッドは、指定されたセレクターまたはセレクター グループに一致するドキュメント内の最初の HTMLElement オブジェクトを返します。var ipt = document.querySelector('input');
    var p = document.querySelector('span');
	
	
    var データ = {名前:""};
	/* 
	    oninput イベントは、ユーザーが何かを入力したときにトリガーされます。
	    このイベントは、<input> または <textarea> 要素の値が変更されたときにトリガーされます。
	 */
    ipt.oninput = 関数(){
	// ipt.value の値を data.name の値に渡します
        データ名 = ipt.値;
    }
    //ipt.value をハイジャックする
    Object.defineProperty(データ、名前、{
    //データサブスクリプション get(){
        return ipt.value; //アクセス時にgetメソッドが呼び出されます},
    //データハイジャック //name:value
    設定(値) {
        p.innerHTML = 値;
        ipt.value = 値;
    }   
})
</スクリプト>
</本文>
</html>

まず、document.querySelector を使用して input タグと span タグの HTML オブジェクトを取得し、属性名が空のデータオブジェクトを定義します。

oninput イベントリスナーを使用して、ユーザー入力を監視します (このイベントは、<input> または <textarea> 要素の値が変更されたときにトリガーされます)。

ipt.value の値を data.name の値に渡します。

データ名 = ipt.値;

Object.defineProperty を使用して、ユーザー入力データを乗っ取ります。

get attribute: 関数です。属性にアクセスすると関数が自動的に呼び出され、関数の戻り値が属性の値になります。
set property: は関数です。プロパティが変更されると、関数が自動的に呼び出されます。関数には、割り当てられる新しい値という 1 つのパラメーターのみがあります。

Object.defineProperty(データ、名前、{
    //データサブスクリプション get(){
       return ipt.value; //data.nameにアクセスすると、getメソッドが呼び出され、ipt.valueを呼び出して現在の値を取得します},
    // データハイジャック set(value) { // データを設定するときにsetメソッドが自動的に呼び出されます p.innerHTML = value;
        ipt.value = 値;
    }

効果はより明白です:

設定方法:

取得方法:

最終的な効果:

参考文献:

https://blog.csdn.net/Doulvme/article/details/107978012
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
https://www.jianshu.com/p/6f589af16ad4
//www.jb51.net/article/217657.htm (推奨)

要約する

これで、js を使用して Vue2.0 で双方向データバインディング機能を実装する方法についての記事は終了です。js を使用して Vue2 双方向バインディングを実装することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: