Vueはシンプルなデータ双方向バインディングを実装します
|
この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。 初心者でも理解しやすいよう、シンプルな実装を紹介します。もちろん双方向データプロキシを実現するには Vue が欠かせません。今後のアップデートに期待しています。 Vue 双方向データバインディング -> Object.defineProperty() //2.0 コア構文
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8" />
<meta http-equiv="X-UA-compatible" content="IE=edge" />
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
<title>ドキュメント</title>
</head>
<本文>
<input type="text" id="ipt" />
<p id="lc"></p>
</本文>
</html>
<スクリプト>
//ページ要素を取得します。var ipt = document.getElementById("ipt");
var ps = document.getElementById("lc");
var obj = { 名前: "" };
//vue 双方向データバインディングの基本原則 applicationObject.defineProperty(obj, "name", {
得る（） {
ipt.value を返します。
},
set(newval) {
ipt.value = newval;
ps.innerHTML = newval;
},
});
//入力データの変更を監視し、pタグに値を割り当てます ipt.addEventListener("keyup", function() {
ps.innerHTML = ipt.value;
});
</スクリプト>エフェクト表示:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows Server のインストール後にワイヤレスとオーディオが機能しない問題を解決する
推薦する
MySQL ロックの知識ポイントのまとめ
ロックの概念①. 現実世界では、鍵は外の世界から身を隠したいときに使う道具です。 ②. コンピュータ...
MySQLを使用して列内の異なる値の数をカウントする例
序文この記事で実装されている要件は、実際には非常に一般的です。たとえば、ユーザーが登録したチャネルを...
MySQL の中国語文字化け問題の解決方法
1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...
MySQL Index Pushdown (ICP) とは何かを理解するための記事
目次1. はじめに2. 原則III. 実践3.1 インデックスプッシュダウンを使用しない3.2 イン...
MySQLインデックスが失敗するいくつかの状況の分析
1. 最左プレフィックス原則 - 複数の列にインデックスが付けられている場合は、最左プレフィックス原...
Nodejs での WeChat アプレット メッセージ プッシュの実装
サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...
Linux で MySQL データベースのデータ ファイル パスを変更する手順
rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...
MySQL 8.0 でのチェック制約の実装
みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。今回はMySQL 8.0で追...
XHTML 特殊文字コレクション
注意 ノーブレークスペース = ノーブレークスペース、 iexcl ¡ &...
JS デコレータ パターンと TypeScript デコレータ
目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...
MySQLのさまざまなロックの概念的理解
楽観的ロック楽観的ロックは、主にデータ バージョン記録メカニズムに基づいて実装され、通常はデータベー...
MySQL データ挿入最適化メソッドconcurrent_insert
スレッドがテーブルに対して DELAYED ステートメントを実行するときに、そのようなハンドラーが存...
docker公式mysqlイメージのカスタム構成の詳細な説明
インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...
Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順
Typescript の利点については詳しく説明する必要はありません。ご興味があれば、(https:...
MySQLに画像を保存する方法
1 はじめにデータベースを設計する場合、画像や音声ファイルをデータベースに挿入することは避けられませ...