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 のインストール後にワイヤレスとオーディオが機能しない問題を解決する
推薦する
Linux で gdb を使用してコア ファイルをデバッグする方法
1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...
VueのRender関数
目次1. ノード、ツリー、仮想DOM 2. 仮想DOM 2.1 データオブジェクトの詳細2.2 制約...
JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)
数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...
hasLayout によって発生する CSS バグの一覧
IE には長い間問題がありました。誰もがテストを受けたとき、誰もが笑顔でしたが、それはただのニヤニヤ...
IDEA で Docker を WSL2 にデプロイする詳細なプロセス
ローカル環境はWindows10+WSL2(Ubuntu)です。サーバーにDockerをインストール...
Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する
Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...
MySQL 論理バックアップとリカバリ テストの概要
目次1. データベース論理バックアップとはどのようなバックアップですか? 2. よく使われる論理バッ...
デザイン: 意志の強いデザイナー
<br />長年の専門的なアートデザイン教育を通じて「美とは何か」を学びましたが、「美を...
vue3 カスタムディレクティブの詳細
目次1. カスタム指示の登録1.1. グローバルカスタム指示1.2. ローカルカスタム指示2. カス...
Vueはシンプルなメモ帳機能を実装します
この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...
Linux で JDK 環境を構成する方法
1. 公式ウェブサイトにアクセスして、jdk-8u162-linux-x64.tar.gzなどのLi...
Linx awk入門チュートリアルの詳細な説明
Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...
Linux で Scala 環境を構築し、簡単な Scala プログラムを書く
Linux に Scala 環境をインストールするのは非常に簡単です。Ubuntu 環境であれば、さ...
CSS のオーバーフロー:hidden エラーの解決方法
失敗の原因今日、カルーセルを書いていたときに、overflow;hidden; が失敗する可能性があ...
jsオブジェクトの読み取り速度の詳細な例
1. リテラルとローカル変数へのアクセスは最も高速ですが、配列要素とオブジェクト メンバーへのアクセ...