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 でボタンを円として再描画する方法

推薦する

Linuxの同時実行は簡単です。このようにするだけです

並行処理関数 i の `grep server /etc/hosts | awk '{pri...

ネイティブ JS カプセル化 vue タブ切り替え効果

この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有していま...

Mysql論理アーキテクチャの詳細な説明

1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...

Linux 上の LAN 内のすべてのホスト名 (コンピュータ名) をすばやく一覧表示するスクリプト

最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...

dockerがredisを再起動するとmysqlデータが失われる問題を解決する

公式ドキュメント:したがって、mysql は次のように起動する必要があります。 docker run...

Dockerコンテナ同士を接続する3つの方法の詳しい説明

Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...

MySql5.7.18 の文字セット構成の詳細なグラフィック説明

背景:かなり前(2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...

Linux で SSH 経由でリモート ファイルシステムをマウントする方法の詳細な説明

SSHFS の機能: FUSE(Linux向けの最高のユーザー空間ファイルシステムフレームワーク)を...

HTML ウェブページのブラウザタイトルバーに小さなアイコンを表示する方法

この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...

JSは文字列内の指定された文字列のn番目の出現位置を取得します

文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...

CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明

構造擬似クラスセレクタの紹介構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されま...

Vueのキャッシュ方法の例の詳細な説明

最近、「フロントエンドキャッシュ」という新しい要件が作成されました要件背景: フォームへの高頻度の繰...

MySQL 5.7.10 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...

デザイン理論: コンテンツプレゼンテーションのための 10 のヒント

<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...

Node.js の非同期イテレータの詳細な説明

目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...