JavaScript データプロキシとイベントの詳細な分析

データブローカーとイベント

翻訳:

星明かりは旅人を失望させず、蝶は花の香りとともにあなたのもとにやって来ます

Object.defineProperty メソッドのレビュー

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<title>Object.defineproperty メソッドのレビュー</title>
	</head>
	<本文>
		<script type="text/javascript">
			数値を18とする
			人 = {
				名前:「張三」
				性別: '男性'、
			}

			Object.defineProperty(人,'年齢',{
				// 値:18,
				// enumerable:true、//プロパティを列挙できるかどうかを制御します。デフォルト値は false です
				// 書き込み可能:true、//プロパティを変更できるかどうかを制御します。デフォルト値は false です
				// configurable: true //プロパティを削除できるかどうかを制御します。デフォルト値は false です

				//誰かが person の age プロパティを読み取ると、get 関数 (getter) が呼び出され、戻り値は age の値になります get(){
					console.log('誰かが age プロパティを読み取りました')
					戻り番号
				},

				//誰かが person の age プロパティを変更すると、setter 関数が呼び出され、変更された値を受け取ります set(value){
					console.log('誰かが age プロパティを変更しました。値は', value)
					数 = 値
				}

			})

			// console.log(Object.keys(person))

			console.log(人)
		</スクリプト>
	</本文>
</html>

データブローカーとは何ですか?

データプロキシ: オブジェクトプロキシを介して別のオブジェクトの属性を操作 (読み取り/書き込み)

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<title>データエージェントとは何ですか?</title>
	</head>
	<本文>
		<!-- データ プロキシ: オブジェクト プロキシを介して別のオブジェクトの属性を操作 (読み取り/書き込み) -->
		<script type="text/javascript">
			obj = {x:100}とします
			obj2 = {y:200}とします

			オブジェクト.defineProperty(obj2,'x',{
				得る（）{
					obj.xを返す
				},
				設定(値){
					obj.x = 値
				}
			})
		</スクリプト>
	</本文>
</html>

Vue のデータプロキシ

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<title>Vue のデータ プロキシ</title>
		<!-- Vue をインポート -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<本文>
		<!-- 
				1. Vue のデータプロキシ:
							vmオブジェクトを使用して、データオブジェクト内の属性の操作（読み取り/書き込み）をプロキシします。
				2. Vue のデータプロキシの利点:
							データ3内のデータのより便利な操作。基本原理：
							Object.defineProperty() を使用して、データ オブジェクト内のすべてのプロパティを vm に追加します。
							VM に追加される各プロパティに対して、ゲッター/セッターを指定します。
							ゲッター/セッター内のデータ内の対応する属性を操作 (読み取り/書き込み) します。
		 -->
		<!-- コンテナを準備する -->
		<div id="ルート">
			<h2>学校名: {{name}}</h2>
			<h2>学校の住所: {{address}}</h2>
		</div>
	</本文>

	<script type="text/javascript">
		Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。
		
		定数vm = 新しいVue({
			el:'#root',
			データ：{
				名前:「シャン・シリコンバレー」
				住所:「紅福科技園区」
			}
		})
	</スクリプト>
</html>

イベントの基本的な使い方

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<title>イベントの基本的な使用方法</title>
		<!-- Vue をインポート -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<本文>
		<!-- 
				イベントの基本的な使用方法:
							1. v-on:xxx または @xxx を使用してイベントをバインドします。xxx はイベント名です。
							2. イベント コールバックはメソッド オブジェクトで構成する必要があり、最終的には VM 上に存在します。
							3. メソッドで設定された関数には矢印関数を使用しないでください。それ以外の場合、これは vm ではありません。
							4. メソッドに設定されている関数はすべて Vue によって管理される関数であり、this は vm またはコンポーネント インスタンス オブジェクトを指します。
							5. @click="demo" と @click="demo($event)" は同じ効果がありますが、後者はパラメータを渡すことができます。
		-->
		<!-- コンテナを準備する -->
		<div id="ルート">
			<h2>{{name}} 研究へようこそ</h2>
			<!-- <button v-on:click="showInfo">クリックして詳細を表示</button> -->
			<button @click="showInfo1">クリックして情報 1 を表示 (パラメータなし)</button>
			<button @click="showInfo2($event,66)">プロンプト情報 2 を表示するにはクリックしてください (パラメータの受け渡し)</button>
		</div>
	</本文>

	<script type="text/javascript">
		Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。

		定数vm = 新しいVue({
			el:'#root',
			データ：{
				名前:「シャン・シリコンバレー」
			},
			方法:{
				showInfo1(イベント){
					// コンソールログ(イベントターゲットのインナーテキスト)
					// console.log(this) // これはvmです
					alert('こんにちは、クラスメイト！')
				},
				showInfo2(イベント,番号){
					console.log(イベント,番号)
					// コンソールログ(イベントターゲットのインナーテキスト)
					// console.log(this) // これはvmです
					alert('こんにちは、クラスメイト!!')
				}
			}
		})
	</スクリプト>
</html>

イベント修飾子

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<title>イベント修飾子</title>
		<!-- Vue をインポート -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<スタイル>
			*{
				上マージン: 20px;
			}
			.demo1{
				高さ: 50px;
				背景色: スカイブルー;
			}
			.box1{
				パディング: 5px;
				背景色: スカイブルー;
			}
			.box2{
				パディング: 5px;
				背景色: オレンジ;
			}
			。リスト{
				幅: 200ピクセル;
				高さ: 200px;
				背景色: ペルー;
				オーバーフロー:自動;
			}
			li{
				高さ: 100px;
			}
		</スタイル>
	</head>
	<本文>
		<!-- 
				Vue のイベント修飾子:
						1.prevent: デフォルトのイベントを防止します（一般的に使用されます）。
						2.stop: イベントのバブリングを停止します（よく使用されます）。
						3.once: イベントは 1 回だけトリガーされます (よく使用されます)。
						4.キャプチャ: イベントキャプチャモードを使用します。
						5.self: イベントは、event.target が現在操作されている要素の場合にのみトリガーされます。
						6. パッシブ: イベントのデフォルトの動作は、イベント コールバックの実行を待たずにすぐに実行されます。
		-->
		<!-- コンテナを準備する -->
		<div id="ルート">
			<h2>{{name}} 研究へようこそ</h2>
			<!-- デフォルトイベントを防止します（よく使用されます） -->
			<a href="http://www.atguigu.com" rel="external nofollow" rel="external nofollow" @click.prevent="showInfo">詳細についてはここをクリックしてください</a>

			<!-- イベントのバブリングを防ぐ (よく使用される) -->
			<div class="demo1" @click="情報を表示">
				<button @click.stop="showInfo">クリックして詳細を表示</button>
				<!-- 修飾子は連続して記述できます-->
				<!-- <a href="http://www.atguigu.com" rel="external nofollow" rel="external nofollow" @click.prevent.stop="showInfo">詳細についてはここをクリックしてください</a> -->
			</div>

			<!-- イベントは 1 回だけトリガーされます (一般的に使用されます) -->
			<button @click.once="showInfo">クリックして詳細を表示</button>

			<!-- イベントキャプチャモードを使用する -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- イベントは、event.target が現在操作されている要素である場合にのみトリガーされます。 -->
			<div class="demo1" @click.self="情報を表示">
				<button @click="showInfo">クリックして詳細を見る</button>
			</div>

			<!-- イベントのデフォルトの動作は、イベント コールバックが完了するのを待たずにすぐに実行されます。 -->
			<ul @wheel.passive="デモ" class="リスト">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</本文>

	<script type="text/javascript">
		Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。

		新しいVue({
			el:'#root',
			データ：{
				名前:「シャン・シリコンバレー」
			},
			方法:{
				表示情報(e){
					alert('こんにちは、クラスメイト！')
					// コンソールログ(e.target)
				},
				メッセージを表示(メッセージ){
					コンソール.log(メッセージ)
				},
				デモ（）{
					(i = 0; i < 100000; i++ とします) {
						コンソールログ('#')
					}
					console.log('疲れた')
				}
			}
		})
	</スクリプト>
</html>

キーボードイベント

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="UTF-8" />
		<title>キーボード イベント</title>
		<!-- Vue をインポート -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<本文>
		<!-- 
				1. Vue でよく使われるボタンのエイリアス:
							入力 => 入力
							削除 => 削除 (「削除」キーと「バックスペース」キーをキャプチャ)
							終了 => esc
							スペース => スペース
							改行 => タブ (特殊、keydown と一緒に使用する必要があります)
							上 => 上
							下 => 下
							左 => 左
							右 => 右

				2. Vueがエイリアスを提供していないボタンの場合、ボタンの元のキー値を使用してバインドできますが、ケバブケース（短いダッシュ命名）に変換するように注意してください。

				3. システム修飾キー（特殊な使用法）: ctrl、alt、shift、meta
							（1）keyupと一緒に使用：修飾キーを押してから他のキーを押して、他のキーを放すと、イベントがトリガーされます。
							（2）keydownと一緒に使用：通常通りイベントをトリガーします。

				4. keyCodeを使用して特定のキーを指定することもできます（非推奨）

				5.Vue.config.keyCodes.Custom キー名 = キーコード、キーエイリアスをカスタマイズできます -->
		<!-- コンテナを準備する -->
		<div id="ルート">
			<h2>{{name}} 研究へようこそ</h2>
			<input type="text" placeholder="入力を促すには Enter キーを押してください" @keydown.huiche="showInfo">
		</div>
	</本文>

	<script type="text/javascript">
		Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。
		Vue.config.keyCodes.huiche = 13 // エイリアスキーを定義します new Vue({
			el:'#root',
			データ：{
				名前:「シャン・シリコンバレー」
			},
			メソッド: {
				表示情報(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</スクリプト>
</html>

これで、JavaScript データプロキシとイベントの詳細な分析に関するこの記事は終了です。JavaScript データプロキシとイベントの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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