[Vue の概要] MVVM データの双方向バインディングと Vue のライフサイクル

1. Vue の概要

1.1 Vueとは何ですか?

1.2 Vueの利点

1.3 ライブラリとフレームワークの違い

2. Vue を始める

2.1 MVVM (双方向データバインディング)

2.2 BootCDN (アクセラレーションサービス)

1. Vue の概要

1.1 Vueとは何ですか?

Vue は、ユーザーインターフェイスを構築するための進歩的な JavaScript フレームワークです。「プログレッシブ」とは、すべての機能を一度に導入するのではなく、アプリケーションの機能と複雑さを徐々に強化するように Vue が設計されていることを意味します。これにより、開発者はプロジェクトのニーズに応じて Vue のさまざまな機能を選択して使用できるようになります。

1.2 Vueの利点

Vue には多くの実用的な利点があります。その一部を次に示します。

学習と使用が簡単: Vue にはシンプルで直感的な API とわかりやすいドキュメントがあり、初心者でもすぐに使い始めることができます。その構文と概念は従来の HTML、CSS、JavaScript に非常に似ているため、学習曲線が短縮されます。
プログレッシブ開発: Vue のプログレッシブ機能により、開発者はプロジェクトのニーズに応じて Vue のさまざまな機能を選択して使用できます。この柔軟性により、Vue はあらゆる規模と複雑さのプロジェクトに適しています。
レスポンシブデータバインディング: Vue のレスポンシブデータバインディングメカニズムにより、データとビューの同期が維持され、データが変更されると、関連する DOM 要素が自動的に更新されます。これにより、開発プロセスが簡素化され、DOM を手動で操作する作業負荷が軽減されます。
コンポーネントベースの開発: Vue は、開発者がアプリケーションを複数の再利用可能なコンポーネントに分割し、それぞれが独自のテンプレート、ロジック、スタイルを持つことを推奨します。コンポーネントベースの開発により、コードの保守性と再利用性が向上し、チームのコラボレーションもより効率的になります。
仮想 DOM と高パフォーマンス: Vue は仮想 DOM を使用してパフォーマンスを向上させます。Vue は仮想 DOM の差分を比較することで、更新が必要な部分のみを更新するため、実際の DOM に対する操作が軽減され、パフォーマンスが向上します。さらに、Vue には非同期レンダリングやコンポーネントレベルの遅延読み込みなどの最適化戦略もあり、これによりアプリケーションのパフォーマンスがさらに向上します。
エコシステムとプラグインのサポート: Vue には、多数のサードパーティライブラリとプラグインから選択できる巨大なエコシステムがあります。これらのライブラリとプラグインは、開発者がさまざまな問題を解決し、開発効率を向上させるのに役立ちます。

Vue には、学習と使用が簡単、強力な柔軟性、優れたパフォーマンス、高い保守性という利点があり、最新の Web アプリケーションを構築するのに理想的な選択肢となっています。ソフトウェアエンジニアとして、私はよく Vue を使用してフロントエンドアプリケーションを開発し、高品質のユーザーインターフェイスを提供するために Vue の最新テクノロジとベストプラクティスを学び、探求し続けています。

1.3 ライブラリとフレームワークの違い

ライブラリ:など: (js で最も典型的なものは jQuery)
- ライブラリは、特定の問題を解決したり、特定の機能を提供したりする再利用可能なコードのコレクションです。通常、これには一連の関数、クラス、メソッド、またはツールが含まれており、開発者はニーズに応じてライブラリ内の関数を選択して使用できます。
- ライブラリを使用する方法は、ライブラリをアクティブに呼び出すことです。開発者はライブラリを独自のコードに導入し、必要に応じてライブラリ内の関数またはメソッドを呼び出して、特定のタスクを完了します。
- 通常、ライブラリはサイズが小さく、特定の機能のみを提供するため、開発者は自分のニーズに応じて適切なライブラリを選択してアプリケーションを構築できます。
フレームワーク：
- フレームワークは、特定の種類のアプリケーションを開発するための一連のソリューションとツールを提供するソフトウェアアーキテクチャの基礎です。アプリケーションの構造、仕様、ワークフローを定義しており、開発者はフレームワークのルールに従って開発する必要があります。
- フレームワークの使用方法は、開発者がアプリケーションコードを作成してフレームワークに埋め込み、フレームワークがアプリケーションの実行プロセスを制御する受動的呼び出しです。
- 通常、フレームワークは大容量であり、完全な開発環境と一連の機能モジュールを提供するため、開発者はフレームワークに基づいて迅速に開発を行うことができ、繰り返しの作業を軽減できます。

2. Vue を始める

2.1 MVVM (双方向データバインディング)

使用する前に、まず MVVM とは何なのかを理解しましょう。簡単に言えば、これはより優れた UI モードソリューションであり、MVVM は双方向データバインディングを通じて双方向でデータを自動的に同期できます。

MVVM	MV-VM
M	モデルデータモデル
V	ビュービュー
VM	ViewModel Model と View を関連付ける View モデルは ViewModel です。ViewModel は、表示のために Model データを View に同期する役割を果たし、また View の変更を Model に同期して戻す役割も担います。

1) V (データの変更) -> M は、イベント
$('#btn_login').click(function(){Submit the ajax を介したページ内のデータデータは json 形式でバックエンドサーバーに渡されます} );

2) M (データの変更) -> V割り当て (バックエンドからフロントエンド ) を通じてビューレイヤーにバックエンドデータ (JSON) を表示します。
ajax を介してバックエンドデータインターフェイスを呼び出し、返された JSON データをレンダリングします。ページ
$('#book_name').val("xxx");

MVC パターンと比較すると、MVVM モデルはより新しいアーキテクチャパターンであり、MVC パターンに基づく新しいコンポーネントであるビューモデル (ViewModel) が導入されています。MVVM パターンは、アプリケーションを 4 つの主要コンポーネント (モデル、ビュー、ビューモデル、データバインディング) に分割します。モデルはデータとビジネスロジックの処理を担当し、ビューはユーザーインターフェイスの表示を担当し、ビューモデルはモデルとビューの間の仲介者として機能し、ビューの状態と動作の処理を担当します。データバインディングメカニズムにより、ビューとビューモデル間のデータ同期がより簡単かつ自動化されます。MVVM パターンの利点は、ビューとビジネスロジックを分離することでコードの保守とテストが容易になり、データバインディングメカニズムを通じてより優れたユーザーインターフェイスの対話エクスペリエンスを提供できることです。

2.2 BootCDN (アクセラレーションサービス)

公式ウェブサイト: BootCDN - Bootstrap 中国語ウェブサイトオープンソースプロジェクトの無料 CDN アクセラレーションサービス

CDN の正式名称は Content Delivery Network で、コンテンツ配信ネットワークのことです CDN は、ネットワーク上に構築されたコンテンツ配信ネットワークであり、各所に配置されたエッジサーバーを利用して負荷分散、コンテンツ配信、スケジューリングなどを利用することができます。中央プラットフォームの機能モジュールにより、必要なコンテンツを近くで取得し、ネットワークの混雑を軽減し、ユーザーのアクセス応答速度とヒット率を向上させます。

CDN の主要テクノロジーには、主にコンテンツの保存および配信テクノロジーが含まれます。
CDN アクセラレーションは主に、Web サイトにアップロードされた画像やメディア、インポートされた JS、CSS、その他のファイルなどの静的リソースを高速化します。
CDN 高速化はさまざまなネットワークノードに依存しており、たとえば、全国に 100 台の CDN サーバーが分散されており、上海からアクセスされた場合、最も近いノードからリソースが返される、これが核となります。
CDN サーバーは、メインサーバーのコンテンツをキャッシュしたり、アクティブにクロールしたりすることで、リソースの予約を実現します。
CDN の基本原理は、オリジンサイトのコンテンツをユーザーに最も近いノードに配信することで、ユーザーが必要なコンテンツを近くで入手できるようにし、ユーザーアクセスの応答速度と成功率を向上させることです。
CDN はネットワークプロバイダーのコンピュータルームに展開されており、ユーザーがネットワークサービスを要求すると、最寄りのネットワークプロバイダーのコンピュータルームからデータを取得できます。

最大の利点は、ユーザーが近くのリソースにアクセスできるため、必要なツールやライブラリをダウンロードする必要がないため、開発が容易になり、プロジェクトリソースが削減されることです。

CDN利用のデメリット：
メリットを語った後はデメリットも語らなければなりませんが、CDNを利用していないWebサイトは、もし崩れても黙ってしまいます。リソースを CDN に依存している少数の Web サイトの場合、ページ表示、JS イベントなどのエクスペリエンスに影響するだけかもしれませんが、CDN に大きく依存している Web サイトの場合、それらはすべて死ぬとしか言えません。一緒に。。。

3.Vueインスタンス

3.1 Vue開発例

Vue にはダイレクトページ開発とエンジニアリングレベル開発の 2 つの開発方法があり、この例ではダイレクトページ開発方法を使用します。

注記：

1. すべての Vue アプリケーションは、Vue コンストラクターを使用して新しい Vue インスタンスを作成することから始まります。
2. Vue のコンテンツ管理領域を指定する必要があります。通常、これを境界とも呼びます。これは、その後のすべての変更が指定された div 内にあり、div の外側は役に立たないことを意味します。
3. 二重中括弧は補間と呼ばれます

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<!-- 1. 导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<!-- 2. 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="xw">
			<h1>{
   
   {msg}}</h1>
		</div>
	<script type="text/javascript">
		/* 3. 构建vue实例并绑定边界 */
		new Vue({
			el:"#xw",
			data(){
				return{
					msg:'hello 小威',
				}
			}
		})
	</script>
	</body>
</html>

3.2 双方向のデータバインディング

vue ディレクティブ: 「v-」接頭辞が付いた特別な属性を参照します。

vue インスタンスのメソッドは、インタラクティブなイベントで使用される関数を定義するために使用され、関数名に制限はありません。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<div id="xw">
			<h1>{
   
   {msg}}</h1>
			<p>
				<input v-model="msg" />
                <!-- v-on:（也可以用@替代） -->
				<button v-on:click="getMsg">获取输入框内容</button>
			</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#xw",
				data() {
					return {
						msg: '123',
					}
				},
				methods: {
					getMsg() {
						alert(this.msg);
					}
				}
			})
		</script>
	</body>
</html>

注記：

データを変更すると DOM も変更され、DOM を変更するとデータも変更されます。

インスタンスの作成時にデータに存在するプロパティのみがリアクティブです

v-model ディレクティブを使用してフォームコントロール要素に双方向のデータバインディングを作成する

これは、メソッド属性メソッドの現在の Vue インスタンスを指します。

コンソールオブジェクトでは、printf スタイルのプレースホルダーを使用できます。文字 (%s)、整数 (%d または %i)、浮動小数点数 (%f)、オブジェクト (%o) の 4 つのタイプのみをサポートします。

Vue インスタンスは、いくつかの便利なインスタンスプロパティとメソッドも公開します。ユーザー定義のプロパティと区別するために、すべてに $ という接頭辞が付いています。

3.3 Vue ライフサイクルフック

Vue ライフサイクルフックは、Vue インスタンスのさまざまな段階で実行されるコールバック関数です。これらのフック関数を使用すると、アプリケーションのさまざまな段階での初期化、更新、破棄操作の特定のライフサイクル段階でカスタムロジックを実行できます。

以下は Vue のライフサイクルフック関数です。

beforeCreate:インスタンスが作成される前、データの監視とイベントの設定がまだ完了していないときに呼び出されます。
created:インスタンスの作成後に呼び出されます。この時点では、データの観測は完了していますが、まだ DOM にマウントされていません。
beforeMount:インスタンスが DOM にマウントされる前に呼び出されます。
Mounted:インスタンスが DOM にマウントされた後に呼び出され、この時点で DOM 要素にアクセスできます。
beforeUpdate:データが更新される前、仮想 DOM が再レンダリングされてパッチが適用される前に呼び出されます。
updated:データが更新された後に呼び出されます。これは、仮想 DOM が再レンダリングされ、パッチが適用された後に発生します。
beforeDestroy:インスタンスがまだ完全に利用可能なときに、インスタンスが破棄される前に呼び出されます。
destroy:インスタンスが破棄された後に呼び出されます。この時点で、インスタンスは破棄され、すべてのイベントリスナーとサブインスタンスが削除されています。

これらの一般的に使用されるライフサイクルフック関数に加えて、Vue は、キープアライブコンポーネントのアクティブ化と非アクティブ化を処理するために、アクティブ化および非アクティブ化などの他のいくつかのフック関数も提供します。

例：