Vue.js フレームワークとは何ですか?

前の記事では、Vue.js の簡単なインストールとクイック スタートについて説明しました。この記事では、主に Vue.js フレームワークとは何か、そしてそれを選択する必要がある理由について説明します。この記事では、フロントエンド テクノロジの使用に関する現在の傾向と、Vue.js の利点と適用可能なシナリオを紹介します。興味のある方は参考にしていただければ幸いです。

Vue.js は、データ駆動型 Web インターフェイスを構築するための進歩的なフレームワークです。 Vue.js の目標は、可能な限りシンプルな API を使用して、応答性の高いデータ バインディングと合成ビュー コンポーネントを有効にすることです。簡単に始められるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。

「Vernacular, Programming」シリーズが帰ってきました。このシリーズでは、Vue.js の基本を一緒に学びます。正しく、基本的な知識を読んでいます。そのため、業界に入って日が浅い方でも、現地語で学ぶことができると思います。

ただし、HTML、CSS、JavaScript の開発におけるプロジェクト経験があることを望みます。プロジェクトの経験がない場合、またはすでに Vue.js の知識を習得している場合、このシリーズは適していません。あなたの現在の学習段階。

1 学習目標

このセクションでは、次のことを学びます:

1. フロントエンドテクノロジの使用における現在の傾向

2. Vue.js の利点

4. .Vue. js の 2 つのコア

5. Vue.js の適用シナリオ

2 誕生の背景

近年、モバイルデバイスの普及とパフォーマンスの向上により、モバイル Web の需要が大幅に増加しています。結果として、モバイル Web アプリケーションである webapp と呼ばれる何かが生成されます。

その機能はますます複雑になり、インタラクションはますますクールになり、機能と効果はネイティブAPPにますます近づいています。たとえば、次のとおりです。

(効果はネイティブ APP とほぼ同じくらい優れています)

この種の Web アプリには、h5 マーケティング Web ページのようなクールな効果があるだけでなく、複雑なクリックもあります。入力、およびビューの切り替えなどの複雑なインタラクション。このようなビジネス ニーズの下では、依然として PC 側の開発ソリューションを使用していますが、これは必然的に不適切になります。例: ビューの切り替え。

PC側では、ビューを切り替えるときにタグを使用してページにジャンプしますが、モバイル側の場合は停止し、次のような画面が表示されます。

(花が咲くまで待ってください、皆さんありがとうございます)

この時点で、ユーザーは待つことしかできません... 3 秒、5 秒、8 秒... ビューを切り替える必要がある Web アプリではそれを想像するのは困難です頻繁に < a> タグを実装するのは、ユーザーにとって非常に不親切です。いずれにせよ、私はそう長く待ちたくないでしょう。たとえば、ユーザーが別のコンテンツを入力すると、それに応じてページが更新され、別のステータスやその他のインタラクティブな効果が表示されます。このようなやり取りが多すぎて手動で行う必要があると、コードが簡単に複雑になり、保守が困難になります。

Webアプリの経験と開発における欠陥を解決するために、MVVMフレームワークVue.jsを学習して使用することにしました

3 MVVMとは

MVVMは次のように分割できます: View --- ViewModel - - - モデルには 3 つの部分があります。以下のビューを見てください:

それでは、MVVM をどのように理解すればよいでしょうか?

上の図では、左側のビューはDOMコンテンツ、つまり表示されるページビューに相当し、右側のモデルはオブジェクトの情報などのデータオブジェクトに相当します:

{ 

name:"张三", 
age:21,

}

そして真ん中のモニターは、両側のデータを監視し、それに応じて変更を加えるように相手側に通知する責任があります。たとえば、Model レイヤーの name の値を「李思」に変更すると、View レイヤーに表示される「Zhang San」は自動的に「李思」に変更され、このプロセスは ViewModel によって操作されます。これを実装するためにコードを手動で記述する必要はありません (DOM を手動で操作する必要がなくなりました)。

複雑な DOM 操作を作成したことがある場合は、それがもたらす利便性を実感できるでしょう。

これは MVVM フレームワークです。MVVM に属する JS フレームワークには、Vue.js に加えて、React.js と Angular.js も含まれます。

ここでは、3 つのフレームワークのどれが優れているかについては分析しません。テクノロジの選択に関しては、開発チームごとに異なる状況があり、異なる要素を考慮します。ここでは、Vue.js の利点についてのみ説明します:

1. Vue.js は軽量で高速です

2. 開始と学習が簡単です

4 Vueの核心

たくさんの準備を経て、ようやくVueの核心について話しました。

それでは、Vue.js について知りましょう。以下は、公式 Web サイトの紹介からの抜粋です:

レスポンシブ データ バインディングと結合ビュー コンポーネントは、可能な限りシンプルな API を通じて実装されています

この文の 2 つのキーワード: データ バインディング と ビュー コンポーネント。

Vue のデータ駆動型: データの変更によりビューが自動的に更新されます。従来、Vuejs はデータを変更するだけで自動的にビューを変更します。言葉：かっこいい。 DOM の更新について心配する必要はなくなりました。これは MVVM のアイデアの実現です。

ビューのコンポーネント化: Web ページ全体をブロックに分割し、各ブロックをコンポーネントと見なすことができます。 Web ページは、結合またはネストされた複数のコンポーネントで構成されます。下の図を見てください:

具体的には、開発プロセス中にコンポーネントを実装する方法と、どのブロックをコンポーネントに分割できるかについて、次の章で 1 つずつ紹介します。 Vue.js では、Web ページを複数のコンポーネントで構成されているものとして表示できます。

5 該当するシナリオ

まだ jquery を使用して DOM を頻繁に操作してページを更新している場合は、Vue.js を使用して DOM 操作を解放できます。

プロジェクト内に同じでコンポーネントにカプセル化できる複数のパーツがある場合は、Vue.js を使用してみることができます。

さらに、Vue.js のコア実装は ES5 の Object.defineProperty 機能を使用しますが、これはブラウザー IE8 以下と互換性がないため、プロジェクトがこれらの下位バージョンのブラウザーと互換性がある必要がある場合は、Vue .js を使用します。適用されません。

結局のところ、プロジェクトを開発する目的は、特定のフレームワークを使用することではありません。

6 このセクションの概要

現在のモバイル Web アプリ プロジェクトの開発ニーズをより適切に満たすために、MVVM フレームワークが誕生しました。Vue.js は、データ駆動型とコンポーネント化という 2 つのコアを持つ JS フレームワークです。

関連する推奨事項:

電車のチケット照会システムを実装するための Vue.js フレームワーク

vue.js インスタンス オブジェクトとコンポーネント ツリー インスタンスの詳細な説明

Vue.js コンポーネントの通信例の共有

以上がVue.js フレームワークとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。