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

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)。
  	(2)a+b
  	(3). demo(1) //関数呼び出し式 (4). x === y ? 'a' : 'b' //三項式2、jsコード(文)
  	(1)の場合
  	(2){}
  • データ内のデータが変更されると、ページ内でデータが使用されている場所も自動的に更新されます。
<!-- コンテナを準備する -->
<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 インスタンス オブジェクトです (データが通常の関数の場合、それ以外の場合はウィンドウを参照します)
			戻る {
				名前:'ビリビリ'
			}
		}
	})
</スクリプト>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue mvvm データレスポンス実装
  • vue の mvvm モードの説明
  • Vue.js テンプレート構文の詳細な説明
  • Vueは双方向データバインディングを実装します
  • Vueデータバインディングの原則の分析

<<:  初心者向けのHTMLタグネストルールの詳細なまとめ

>>:  よく使われるCSSスタイル(レイアウト)の詳しい説明

推薦する

MySQLのクラスタ化インデックスと非クラスタ化インデックスの詳細な説明

1. クラスター化インデックステーブル データはインデックスの順序で保存されます。つまり、インデック...

jQueryはフォーム検証を実装する

jQueryを使用してフォーム検証を実装します。参考までに、具体的な内容は次のとおりです。登録.ht...

仮想スクロールを簡単に実装するためのVueサンプルコード

目次序文ローリング原理成し遂げるソースコード参照する序文モバイル Web ページの日常的な開発では、...

Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...

Docker用国産イメージウェアハウスの使い方

1. 問題の説明何らかの理由により、中国でのDockerイメージのダウンロード速度は特に遅くなります...

MySQL テーブルの垂直分割と水平分割

垂直分割垂直分割とは、データテーブルの列を分割すること、つまり、多くの列を持つテーブルを複数のテーブ...

ブラウザのCSS、JavaScript、背景画像のキャッシュをクリアする簡単な方法

実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...

docker runの--rmオプションの使用方法

Docker コンテナが終了しても、デバッグを容易にし、ユーザー データを保持するために、デフォルト...

Linuxでファイルを削除してもスペースが解放されない問題の対処方法

問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...

Docker での Jenkins と Docker を使用した継続的デリバリー

1. 継続的デリバリーとは何かソフトウェア製品の出力プロセスは、ソフトウェアがいつでもリリースできる...

Vue-routerルーティングの使い方

目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...

Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法

序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...

Vue の 2 択タブバー切り替えの新しいアプローチ

問題の説明プロジェクトに取り組んでいるときに、タブ バーの切り替え効果を作成する必要がある場合があり...

ElementUIテーブルのヘッダーアイコンにフローティングプロンプトを追加します。

この記事では主に、ElementUI テーブルのヘッダー アイコンにフローティング プロンプトを追加...

MySQL 5.7.21 のインストールとパスワード設定のチュートリアル

MySQL5.7.21のインストールとパスワード設定のチュートリアルは次のとおりです。公式リファレン...