VUE インスタンスのパラメータと MVVM モードのナレッジ ポイントを要約して整理する

この記事では、vue に関する関連知識を提供します。主に、vue インスタンス パラメーターと MVVM モードに関連する問題を紹介します。Vue オブジェクトをインスタンス化します。パラメーターはオプション オブジェクトです。見てみましょう。一緒に、皆さんのお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]

構成パラメータ

Vue オブジェクトをインスタンス化します。パラメーターはオプション オブジェクトです。それに含まれるオプションについては、以下で簡単に説明します。

new Vue({
  options})

Vue インスタンスでは、this.$options

を通じてインスタンスの構成アイテムを表示できます。データ関連のオプション

##data リアクティブ バインディングを必要とするデータ オブジェクトを宣言しますprops親コンポーネントからデータを受信しますpropsDataインスタンスの作成時にプロパティを手動で渡してプロパティのテストを容易にするcomputed は計算されたプロパティの宣言に使用されますメソッド Vue インスタンスの定義に使用されるメソッドwatchプロパティをリッスンし、Vue インスタンスのデータ変更を監視し、そのインスタンスを呼び出します。コールバック関数

オプション	説明

DOM 関連オプション

##オプション##elVue ルート コンポーネントのマウント ポイントを宣言します (ルート コンポーネントに固有)template要素をマウントするための文字列テンプレートrender仮想 DOM の作成に使用されるレンダリング関数は、文字列テンプレートの代替手段ですこれは開発環境でのみ使用されます。render() でエラーが発生した場合、追加のレンダリング出力が提供されます##ライフサイクルフック関連のオプション

説明
	#renderError

オプション

説明beforeCreate#Vue インスタンスが初期化された後、データ オブザーバーとイベント/ウォッチャー イベントが設定される前に発生します#beforeMount がマウント開始前に呼び出され、その時点でレンダリングされます。 () は初めて呼び出されますmountedel は新しく作成された vm.$el に置き換えられ、##beforeUpdate##updatedデータ変更により仮想 DOM が再レンダリングされ、パッチが適用された後に呼び出されますactivatedキープアライブ コンポーネントがアクティブ化されたときに呼び出されますdeactivatedkeep-alive コンポーネントが非アクティブ化された場合 Callインスタンスが破棄される前に呼び出します。 Vue インスタンスはまだ利用可能です##destroyedVue インスタンス 破棄後に呼び出され、すべてのイベント リスナーとサブインスタンスが削除され、システム リソースが解放されますリソース関連のオプションオプション説明

created	Vue インスタンスが初期化された後に発生し、データ オブザーバーとイベント/ウォッチャー イベントが設定された後、
	# を呼び出す前にインスタンスにマウントされます
データが更新されるときに呼び出されます。これは、仮想 DOM が再レンダリングされ、パッチが適用される前に発生します。
	#beforeDestroy

#directivesローカル登録用のカスタム ディレクティブの構成filters フィルターは、フィルター、フィルター、フォーマットに使用されますフィルタはパラメータと戻り値を持つメソッドであり、{ {}} と v-bind でのみ使用できます。 #コンポーネントローカル登録コンポーネントの構成説明

	複合オプション
	オプション

##parent

現在のインスタンスの親インスタンスを指定します。インスタンス 、子インスタンスは this.$parent を使用して親インスタンスにアクセスし、親インスタンスは $children 配列を通じて子インスタンスにアクセスしますmixinsMix属性を Vue インスタンス オブジェクトに取り込み、Vue で使用します。 独自のインスタンス オブジェクトのプロパティは呼び出される前に実行されます (コンポーネントの多重継承) extends別のコンポーネントの継承を宣言するために使用され、Vue.extend を使用する必要がなくなります。単一ファイル コンポーネントの拡張に便利です (コンポーネントの単一継承)provide&inject2すべてのサブコンポーネントに依存関係を挿入するには、プロパティを一緒に使用する必要があります

#その他のオプション

オプション説明 ##name区切り文字{}}functionmodel##inheritAttrsデフォルトでは、親スコープ付きの非 props プロパティ バインディングは、子コンポーネントのルート要素に適用されます。他のコンポーネントまたは要素内にネストされたコンポーネントを作成する場合、このプロパティを false に設定することで、これらのデフォルトの動作をオフにできます。commentstrue に設定すると、レンダリング テンプレート内の HTML コメントは保持されます。MVC を理解する

コンポーネントがそれ自体を再帰的に呼び出して、デバッグ中にわかりやすい警告メッセージを表示できるようにします
テンプレート文字列のスタイルを変更します、デフォルトは {
コンポーネントをステートレス (データなし) およびインスタンスレス (このコンテキストなし) にします
v-model の使用時にカスタム コンポーネントがプロパティとイベントをカスタマイズできるようにする

モデル、ビュー、およびコントローラーは、それぞれデータ、ビュー、コントローラーを表します。実際、これは単なる設計上のアイデアです。

Model: データ モデル。データの保存に使用されます。

View: ビュー インターフェイス。UI インターフェイスを表示し、ユーザー インタラクションに応答するために使用されます。

Controller : コントローラー (大きなハウスキーパーの役割)、モデル データの変更を監視し、ビューの動作を制御し、ユーザー操作を処理します

MVVM モード

M(モデル): データを表します

V (ビュー): ビュー (ページ) を表します

VM (ビューモデル): ビュー モデルを表します、役割: ビューとモデルの変換を管理するために使用されます

MVVM は MVC です拡張バージョンは基本的に MVC と変わりません。コードの位置が変更されるだけです。

簡単に言うと、ビューが変更されるとモデルも変更され、モデルが変更されると、 , ビューも変更されます。変更が発生します。これは Vue の双方向データ バインディングです。

キーとなるのは、データがどのようにビューを更新するかです。ビューの更新データは実際にイベントを通じて監視できるためです。たとえば、入力タグは入力イベントを監視できます。
双方向バインド手順:

リスナー オブザーバーを実装して、すべてのプロパティをハイジャックして監視し、変更がある場合はサブスクライバーに通知します。 。

• プロパティ変更通知を受信し、対応する関数を実行してビューを更新できるサブスクライバー ウォッチャーを実装します。

• 各ノードの関連命令をスキャンして解析し、テンプレート データを初期化し、それに応じて対応するサブスクライバーを初期化できるパーサー Compile を実装します。
Vue の双方向バインディングの原則:

Vue データの双方向バインディングは、データを通じてパブリッシャーとサブスクライバーを結合することです。ハイジャックはパターンを通じて実装されます。その核心は、Object.defineProperty() メソッドを通じて set 関数と get 関数を設定してデータ ハイジャックを実現し、データ変更時にサブスクライバーにメッセージをパブリッシュし、対応する監視コールバックをトリガーすることです。つまり、データとビューが同期されます。データが変更されるとビューも変更され、ビューが変更されるとデータも変更されます。

[関連する推奨事項: javascriptビデオチュートリアル

,

webfrontend]

以上がVUE インスタンスのパラメータと MVVM モードのナレッジ ポイントを要約して整理するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。