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 が起動に失敗しました。エラー ログは次のとお...
DockerでPrometheusをインストールする詳細なチュートリアル
目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...
MySQLに絵文字表現を挿入する方法
序文今日、オープンソース プロジェクトのフィードバック フォームを設計していたところ、絵文字表現を挿...
Promiseの紹介と基本的な使い方の簡単な分析
Promise は、ES6 で導入された非同期プログラミングのための新しいソリューションです。 Pr...
モバイルウェブ画面適応（rem）
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
docker を使用してシンプルな C/C++ プログラムをデプロイする方法
1. まずhello-world.cppファイルを作成しますプログラムコードは次のとおりです。 #i...
Dockerのインストール、イメージの作成、NodeJSプログラムの読み込みと実行の詳細なプロセス
システム環境: Windows 7 1. DockerをインストールするDocker公式サイトからd...
MySQL でプロファイルを使用する方法のチュートリアル
プロフィールとは何ですか?特定の SQL のパフォーマンスを分析したい場合に使用できます。プロファイ...
HTMLのテーブルタグの基本学習チュートリアル
表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...
MySQL インデックスの知識の要約
MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...
Linux でテキストから改行文字を削除する方法
復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...
Linux での MySQL 5.7 の導入とリモート アクセス構成
前書き: 最近、私はパートナーとチームを組んで .NET Core プロジェクトに取り組む予定です。...
React Contextの理解と応用についてお話ししましょう
目次序文React Context の初見コンテキストの使い方コンテキストを直接取得できるいくつかの...
hrefを使用すると、リンクをクリックするだけでページ上の特定の場所にジャンプできます。
ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...
MySQL サーバー ログイン エラー ERROR 1820 (HY000) の解決方法
障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...