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

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>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue の双方向イベントバインディング v-model の原理についての簡単な説明
  • Vue の動的コンポーネントとグローバル イベント バインディングの概要の詳細な説明
  • Vue フィルターの使用とタイムスタンプ変換の問題
  • Vue フィルターの実装と適用シナリオの詳細な説明
  • Vue のデータとイベントのバインディングとフィルターの詳細な説明

<<:  mysql5.7でbinlogを使用してデータを復元する方法

>>:  XAML でボタンを円として再描画する方法

推薦する

JS はデータ URL をどのように理解するのでしょうか?

目次概要データ URL の使用を開始するデータURL構文複数言語の文字列のBase64エンコードとデ...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

MySQL InnoDB ReplicaSet の簡単な紹介

目次01 InnoDBレプリカセットの紹介02 InnoDBレプリカセットの制限03 導入前に知って...

Docker クロスサーバー通信オーバーレイソリューション (パート 1) Consul 単一インスタンス

目次シナリオタスクアイデア分析するコンセプトと選択ちょっとしたテスト環境説明予防実践テスト引用シナリ...

非常に実用的なTomcat起動スクリプトの実装方法

序文セキュリティ上の理由から、会社が Linux サーバーへのすべてのログインにセキュリティ制限を課...

設定ファイルを書いてMyBatisを簡単に使う方法

設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...

Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...

CSS マージンの折りたたみの詳細な説明

前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...

Windows で IP アドレスを指定してサーバーへのリモート アクセスを設定する方法

当社には、外部ネットワークからの干渉を受けることが多いサーバーが多数あります。侵入者はポート 338...

Linux での Python のアップグレードと pip のインストールの詳細な説明

Linuxバージョンのアップグレード: 1. まず、Linuxオペレーティングシステムに付属するPy...

MySQLでよく使われるSQLとコマンドの入力からデータベースの削除、そして終了まで

目次開始と停止データベース関連の操作データベーステーブル関連の操作制約関連デフォルトの制約高度なデー...

フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

目次1. 環境整備2. イメージを実行する問題を解決するRedis のインストールNginx のイン...

JS を使用して HTML で回転するクリスマスツリーを実装する

<!DOCTYPE ヘムル パブリック> <html> <ヘッド&g...

Vue で Baidu Map を呼び出して経度と緯度を取得する

プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...

純粋な CSS ヘッダーの実装コードを修正

純粋な CSS で固定ヘッダーを実装するのが難しい主な理由は 2 つあります。まず、最大のシェアを持...