VUEのデータプロキシとイベントの詳細な説明

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>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>
	</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>