Vue の基本 MVVM、テンプレート構文、データバインディング

1. Vueの概要

Vue公式サイト

英語公式サイト: https://vuejs.org/

中国語公式サイト: https://cn.vuejs.org/

MVVM アーキテクチャパターン

MVVM の紹介

MVVM は、M: Model 、V: View 、VM: ViewModel (Vue インスタンスオブジェクト) の 3 つの部分で構成されています。モデル層はデータモデルを表し、データの変更や操作のビジネスロジックもモデルで定義できます。View は UI コンポーネントを表し、データモデルを UI に変換して表示する役割を担っています。ViewModel は、View とモデルを同期させるオブジェクトです。

MVVM アーキテクチャでは、View と Model の間に直接の接続はありません。代わりに、ViewModel を介してやり取りします。Model と ViewModel 間のやり取りは双方向であるため、View データの変更は Model に同期され、Model データの変更は View に即座に反映されます。

ViewModel は双方向データバインディングを通じて View 層と Model 層を接続し、View と Model 間の同期は完全に自動で行われ、人間の介入は必要ありません。そのため、開発者はビジネスロジックに集中するだけでよく、DOM を手動で操作したり、データステータスの同期の問題を心配したりする必要はありません。複雑なデータステータスの維持は、MVVM によって完全に管理されます。

MVVMパターン図

VueのデザインはMVVMモデルに触発されている
最終的に、データ内のすべての属性が vm に表示されます。
vmのすべての属性とすべてVueプロトタイプで属性は両方ともVueテンプレートで利用可能直接ご使用ください。

Vue の紹介

これはJavaScript MVVMライブラリであり、動的なユーザーインターフェース構築のセットです。プログレッシブフレームワーク
Vue は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。プログレッシブとは、最も主張が少ないことを意味します。各フレームワークには必然的に独自の特性があり、ユーザーに対して特定の要件があります。これらの要件は主張であり、強い場合もあれば弱い場合もあります。その強さは、ビジネス開発での使用方法に影響します。
プログレッシブ: Vue は下から上にレイヤーごとに適用できます。シンプルなアプリケーションには軽量なコアライブラリのみが必要で、複雑なアプリケーションにはさまざまなVueプラグインを導入できます。

Vueの機能

MVVMパターンに従う
双方向データバインディング: Vue.js はデータの変更に自動的に応答し、ユーザーがコード内に事前に記述したバインディング関係に従って、バインドされたすべてのデータとビューコンテンツを変更します。
コンポーネント化：Vue.jsはコンポーネントを使用して、シングルページアプリケーション内のさまざまなモジュールを1つに分割します。別コンポーネントでは、親アプリケーションに各種コンポーネントタグを記述し（穴埋め）、コンポーネントタグにコンポーネントに渡すパラメータを記述し（関数にパラメータを渡すのと同じように、このパラメータをコンポーネントのプロパティと呼びます）、その後、各種コンポーネントの実装を別々に記述し（穴埋め）、アプリケーション全体が完成します。コンポーネント化されたモデルを採用して、コードの再利用性を高め、コードの保守を容易にします。
ビュー、データ、構造の分離、宣言型コーディング: データの変更が容易になります。ロジックコードを変更したり、DOM を直接操作したりする必要はありません。関連する操作を完了するには、データを操作するだけでよいため、開発効率が向上します。
仮想 DOM と diff アルゴリズム: JavaScript を通じてさまざまな計算を事前に実行し、最終的な DOM 操作を計算して最適化することができます。この DOM 操作は前処理操作であり、実際に DOM を操作するものではないため、仮想 DOM と呼ばれます。最後に、計算が完了すると、DOM 操作が実際に送信され、DOM 操作の変更が DOM ツリーに反映されます。

2. Vueを使い始める

Vue が正しく動作するには、Vue インスタンスを作成し、構成オブジェクトを渡す必要があります。
ルートコンテナー内のコードは引き続き HTML 仕様に準拠していますが、いくつかの特別な Vue 構文が追加されています。
ルートコンテナー内のコードは Vue テンプレートと呼ばれます。
ビューインスタンスとコンテナは一対一の対応。
本当の発展Vue インスタンスは 1 つだけであり、コンポーネントで使用されます。
{{xxx}} の xxx は js 式である必要があり、xxx はデータ内のすべての属性を自動的に読み取ることができます。

  js式とjsコード（ステートメント）の違いに注意してください
  1. 式: 式は値を生成し、値が必要な場所であればどこにでも配置できます (1)。
  	（２）a+b
  	(3). demo(1) //関数呼び出し式 (4). x === y ? 'a' : 'b' //三項式2、jsコード（文）
  	（１）の場合
  	（２）{}

データ内のデータが変更されると、ページ内でデータが使用されている場所も自動的に更新されます。

<!-- コンテナを準備する -->
<div id="デモ">
	<h1>こんにちは、{{name.toUpperCase()}}、{{address}}</h1>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。
//Vueインスタンスを作成する new Vue({
		el:'#demo', //el は、現在の Vue インスタンスが提供するコンテナーを指定するために使用されます。値は通常、CSS セレクター文字列です。
		data:{ //data はデータを格納するために使用されます。データは el で指定されたコンテナによって使用されます。値を一時的にオブジェクトに書き込みます。
		名前:'ビリビリ',
		住所:'上海'
		}
	})
</スクリプト>

3. テンプレート構文

Vue テンプレート構文には主に 2 つのカテゴリがあります。

1. 補間構文:

機能: 用途タグ本体の内容を解析します (開始タグと終了タグの間の内容がタグ本体です)。
記述方法: {{xxx}}, xxx は js 式であり、データ内のすべての属性を直接読み取ることができます。

2. コマンド構文:

機能: 用途タグを解析します (タグ属性、タグ本体のコンテンツ、バインディングイベントなどを含む)。
たとえば、v-bind:href="xxx" または省略形: href="xxx" の場合、xxx も js 式として記述する必要があり、データ内のすべての属性を直接読み取ることができます。
注: Vue には多くの命令があり、それらはすべて v-xxx の形式になっています。ここでは v-bind を例に挙げます。

<!-- コンテナを準備する -->
<div id="ルート">
	<h1>補間構文</h1>
	<h3>こんにちは、{{name}}</h3>
	<hr/>
	<h1>コマンド構文</h1>
	<a v-bind:href="address.url.toUpperCase()" x="hello">クリックして{{address.name}}1へ</a>
	<a :href="address.url" x="hello">クリックすると {{address.name}}2 に移動します</a>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。
	新しいVue({
		el:'#root',
		データ：{
			名前:'月见',
			// マルチレベル構造アドレスに設定できます:{
				名前:「百度」
				url:'http://www.baidu.com',
			}
		}
	})
</スクリプト>

4. データバインディング

Vue にはデータバインディングの方法が 2 つあります。

1.一方向バインディング (v-bind) ：データはデータからページへのみ流れます。

2.双方向バインディング (v-model) ：データはデータからページへ流れるだけでなく、ページからデータへも流れることができます。

述べる：

双方向バインディングは、一般的にフォーム要素（入力、選択など）
v-model:valueデフォルトで値を収集するため (フォームのような要素のみが値を持つ)、 v-model :value は v-model と省略できます。

<div id="ルート">
	<!-- 通常の書き込み -->
	一方向データバインディング: <input type="text" v-bind:value="name"><br/>
	双方向データバインディング: <input type="text" v-model:value="name"><br/>
	<!-- 略語 -->
	一方向データバインディング: <input type="text" :value="name"><br/>
	双方向データバインディング: <input type="text" v-model="name"><br/>
	<!-- 次のコードは間違っています。v-model はフォーム要素 (入力要素) にのみ適用できるからです -->
	<h2 v-model:x="name">こんにちは</h2> 
</div>
<script type="text/javascript">
	Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。
	新しいVue({
		el:'#root',
		データ：{
			名前:'ビリビリ'
		}
	})
</スクリプト>

5. elとdataを書く2つの方法

1. elの書き方は2通りあります: new

Vue を使用する場合は、el 属性を設定します。
まず Vue インスタンスを作成し、次にvm.$mount('#root')を通じて el の値を指定します。

2. データを書き込む方法は2つあります

オブジェクト指向
機能的
選択方法: どちらの記述方法も受け入れられますが、コンポーネントを使用する場合は、データを関数型スタイルで記述する必要があります。そうしないと、エラーが報告されます。

3. 重要な原則:

Vueによって管理される関数は矢印関数を記述しないでください。矢印関数を記述すると、これは Vue インスタンスではなくウィンドウになります。

<div id="ルート">
	<h1>こんにちは、{{name}}</h1>
</div>
<script type="text/javascript">
	Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。
	//el の 2 つの書き方-----------
	定数v = 新しいVue({
		//el:'#root', //データを書き込む最初の方法:{
			名前:'ビリビリ'
		}
	})
	コンソールログ(v)
	v.$mount('#root') // 2番目の書き方 // 例:
	タイムアウトを設定する(() => {
		v.$mount('#root')
	},1000); //タイマー: 1秒後にページはVueエフェクトを表示します// ---------------------
	//データを書き込む2つの方法 new Vue({
		el:'#root',
		//データを書き込む最初の方法: オブジェクト スタイル /* data:{
			名前:'ビリビリ'
		} */
		// データを書き込む 2 番目の方法: 関数型スタイル // データを関数として書き、この関数はオブジェクトを返す必要があります。関数型の書き方は、通常、コンポーネントとフレームワークで使用されます // 注: この関数はそれ自体ではなく、Vue data(){ によって呼び出されます
			// console.log('@@@',this) // これは Vue インスタンス オブジェクトです (データが通常の関数の場合、それ以外の場合はウィンドウを参照します)
			戻る {
				名前:'ビリビリ'
			}
		}
	})
</スクリプト>