Vue.jsの詳細な図解説明

今回はVue.jsを画像と文章で詳しく解説します。Vue.jsを使用する際の注意点を実際の事例で見てみましょう。

Vue.js は、現在最も人気があり、有望なフロントエンド フレームワークの 1 つであり、フロントエンド プロジェクトを迅速に構築および開発するのに役立つ新しい思考モデルを提供します。この記事は、誰もが Vue.js を理解し、Vue.js の開発プロセスを理解し、対応する展開と最適化作業を実行しながら、Vue.js を通じて中規模から大規模のフロントエンド プロジェクトを構築する方法をさらに理解できるようにすることを目的としています。

この記事は、テキストの紹介を含む PPT 画像の形式で開発され、ナレッジ ポイントの特定のコードは含まれません。そこをクリックするだけです。興味のある学生は、対応するドキュメントを確認して詳細を確認してください。

Vue.js の紹介

上の図の紹介から、Vue.js が軽量のデータ駆動型フロントエンド JS フレームワークであることは難しくありません。それが Vue.js との最大の違いです。 jQueryとは、jQueryはDOMを操作することでページの表示を変更し、Vueはデータを操作することでページを更新して表示します。以下は Vue データ駆動型の概念モデルです:

Vue.js は主に、上の図の緑色の立方体の ViewModel 部分を担当します。これは、View レイヤー (つまり DOM レイヤー) と Model レイヤー (つまり、JS ロジック層) DOM リスナーとデータ ビンギング、リスナーに相当する 2 つは、ViewModel を通じてバインドされます。

View レイヤーのビューが変更されると、Vue は DOM Listeners を通じて Model レイヤーのデータをリッスンして変更します。逆に、Model レイヤーのデータが変更されると、Data Binging を通じて View レイヤーの表示もリッスンして変更します。これにより、Vue.js データ ドライブの原理でもある双方向のデータ バインディング 機能が実現されます。

Vue インスタンス

HTML ファイルでは、script タグを通じて Vue.js を直接導入し、ページ内に Vue.js コードを記述することができます。上の図では、 new Vue() を通じて Vue インスタンスを構築しました。インスタンスには、ぶら下がっている要素 (el)、データ (data)、テンプレート (template)、メソッド (メソッド)、およびライフ サイクルフック (作成されるなど) およびその他のオプション。異なるインスタンス オプションには、次のような異なる機能があります:

(1) el は、Vue が操作する必要がある要素の下の領域を示し、「#demo」は、demo の ID を持つ要素の下の領域を操作することを意味します。
(2) data は Vue インスタンスのデータ オブジェクトを表し、データの属性はデータの変更に応答できます。
(3) created は、インスタンスの作成が完了すると、そのメソッドが呼び出されるインスタンスのライフサイクルのステップを示します。

Vue の共通命令

Vue プロジェクトの開発では、Vue 命令が最もよく使用される命令です。 Vue が提供する共通の命令を通じて、Vue のデータ ドライブの強力な機能を最大限に活用できます。以下は、一般的に使用される命令を図で簡単に紹介したものです:

(1) v-text: jQuery の text() メソッドと同様に、バインドされた要素のコンテンツを更新するために使用されます
(2) v-html: 使用されますバインドされた要素を更新します。 jQuery の html() メソッドと同様に、要素内の HTML コンテンツを決定します。
(3) v-if: 式の If P3 の値の true および false 条件に基づいて要素をレンダリングするために使用されます。上の図は false です。P タグはレンダリングされません
(4) v-show: 非表示の要素を表示し、式の値の true と false の条件に基づいて要素の表示 CSS 属性を切り替えるために使用されます
(5) v -for: 図の P6 に示すように、データを走査して要素またはテンプレートをレンダリングするために使用されます。 [1,2,3] の場合、3 つの P タグがレンダリングされ、内容は順番に 1、2、3 になります。 (6) v-on: 要素にイベントをバインドするために使用されます。図では、showP3 クリック イベントにバインドされています

Vue の詳細については、Vue2.0 ドキュメントのアドレスを参照してください。 //vuefe.cn/api/#手順

Vue.js テクノロジー スタック

Vue.js を導入することで HTML ページに直接 Vue コードを記述できると前述しましたが、この方法は一般的には使用されません。プロジェクトが比較的大きい場合、プロジェクト内に多数のページが存在するため、各ページで Vue.js が導入されたり、Vue インスタンスが宣言されたりすると、後のメンテナンスやコード共有に非常に悪影響が生じ、インスタンス名の競合も発生します。そのため、Vue が提供するテクノロジー スタックを使用して、強力なフロントエンド プロジェクトを構築する必要があります。

Vue.js に加えて、以下も使用する必要があります:

(1) vue-cli: Vue プロジェクトのディレクトリとファイルを自動的に生成するために使用される Vue のスキャフォールディング ツール。
(2) vue-router: Vue が提供するフロントエンド ルーティング ツール。これを使用して、ページ ルーティング制御、部分更新、オンデマンド読み込みを実装し、単一ページ アプリケーションを構築し、フロントエンドとバックエンドを実現します。別れを終わらせる。
(3) vuex: Vue が提供する状態管理ツールは、プロジェクト内のさまざまなデータの相互作用と再利用を同時に管理し、必要なデータ オブジェクトを保存するために使用されます。
(4) ES6: Javascript の新しいバージョン、ECMAScript6 の略。 ES6 を使用すると、JS ロジックを迅速に実装するために提供される強力な機能を利用しながら、JS コードを簡素化できます。
(5) NPM:node.js パッケージ管理ツールを使用して、フロントエンド プロジェクトに必要なパッケージ、プラグイン、ツール、コマンドなどを一元管理し、開発とメンテナンスを容易にします。
(6) webpack: フロントエンド プロジェクト ファイルを同時に js にパッケージ化して圧縮でき、vue-loader などのローダーを介して構文変換とロードを実現できる強力なファイル パッケージ化ツールです。
(7) Babel: ES6 コードをブラウザ互換の ES5 コードに変換するプラグイン

上記のテクノロジーを使用して、Vue プロジェクトの構築を開始できます。

大規模なアプリケーションの構築

中規模および大規模な Vue プロジェクトを構築する際に、主に vue-cli を使用してプロジェクトのフロントエンド ディレクトリとファイルを自動的に生成し、理解する方法を紹介します。 Vue のすべてがコンポーネントであること 概念と親コンポーネントと子コンポーネント間の通信の問題、Vue プロジェクトでサードパーティのプラグインを使用する方法を説明し、最後に webpack を使用してプロジェクトをパッケージ化してデプロイすることについて説明します。

vue-cli build

vue-cli を使用する前に、node.js をインストールし、vue-cli をインストールするために提供される npm コマンドを使用する必要があります。 node.js をインストールするには、公式 Web サイトにアクセスしてソフトウェアをダウンロードしてインストールするだけです。アドレスは https://nodejs.org/en/

インストールが完了したら、cmd コマンドを開きます。コンピューターの line ツールにアクセスし、上の図のコマンドを入力します:

(1) npm install -g vue-cli: vue-cli をグローバルにインストールします
(2) vue init webpack my-project: vue-cli を使用して、ディレクトリ アドレスの webpack に基づいて「my-project」という名前の Vue プロジェクト ファイルとディレクトリ
(3) cd my-project: 作成したばかりのフォルダーを開きます
(4) npm intall: プロジェクトが依存するパッケージ ファイルをインストールします
( 5) npm run dev: ローカル ノード サーバーを使用してブラウザで開き、プロジェクト ページを参照します

このようにして、webpack に基づいた vue プロジェクト ディレクトリが構築されます。

単一ファイルコンポーネント

先ほど構築した vue プロジェクトで、App.vue および Hello.vue ファイルを見つけます。次に、このように .vue 接尾辞で終わるファイルが共通の単一ファイルです。 Vue プロジェクトのコンポーネント。単一のファイル コンポーネントには、関数またはモジュールの html、js、および css が含まれます。 .vue ファイルでは、template タグに html、script タグに js、style タグに css を記述できます。このような関数またはモジュールは .vue コンポーネントであり、コンポーネントの共有や後のメンテナンスにも非常に便利です。

親子コンポーネントの通信

そのため、単一ファイルコンポーネントを核としたプロジェクトの開発では、.vueの親子間でデータをどのように交換するかという問題が必ず考えられます。コミュニケーションを実現するためのコンポーネントはどうでしょうか？ Vue2.0 では、親コンポーネントが子コンポーネントにデータを渡すことができるようにするための Props が提供されており、$emit は、子コンポーネントが親コンポーネントにデータを渡すことができるようにするために使用されます。もちろん、より複雑で一般的なデータ対話の場合は、vuex を使用してデータを均一に管理することをお勧めします。詳細については、https://vuefe.cn/guide/components.html#Use Props to pass data

プラグインの使用法

を参照してください。

次に、webpack ベースの vue プロジェクトでプラグインを使用する方法を紹介します。主に 2 つの状況があります:

(1) グローバル使用

(1) Index.html で導入: この方法ではありません。ロード順序に問題があり、一部のプラグインがこの方法をサポートしていないため、この方法をお勧めします。
(2) webpack設定ファイルによる導入: 主にプラグイン設定項目の webpack.ProvidePlugin() メソッドを通じて実装されますが、CommonJs 仕様をサポートし、次のようなグローバル変数を提供するプラグインにのみ適しています。 jQueryの$。
(3) import + Vue.use() による導入: この方法では、グローバル .vue ファイルにロードする必要があるプラグインをインポートし、Vue.use('プラグイン変数名') を通じて実装する必要があります。ただし、この方法では、vue-resourcece など、Vue.js プラグイン記述仕様に従うプラグインの使用のみがサポートされます。

(2) 単一ファイルの使用

(1) インポートによる直接導入: この方法は、プラグインを呼び出す必要がある .vue ファイルで使用できますが、プラグインの作成順序に注意する必要があります。インスタンスを使用することも、require を通じて導入することもできます。

(2)インポート+コンポーネント登録: Vueコンポーネントをコンポーネント内に登録して使用する方法です。

デプロイと最適化

Vue プロジェクト全体のフロントエンド コーディング段階が完了したら、フロントエンド プロジェクト ファイルをデプロイして最適化する必要があります。主な方法は次のとおりです。

( 1) webpack の DefinePlugin を使用して運用環境を指定します。プラグインの DefinePlugin 設定を通じて、「process.env」属性を「development」(開発環境) または「production」(運用環境) の組み合わせとして宣言できます。 npm設定ファイルpackage.jsonを使用すると、scriptコマンドを使用して環境モードを切り替えることができて非常に便利です。

(2) UglifyJs を使用して、コード ブロック内の警告ステートメントを自動的に削除します。通常、新しい webpack.optimize.UglifyJsPlugin() を通じて構成された運用環境の Webpack 構成ファイルで使用され、警告ステートメントを削除するとファイルのサイズを削減できます。

(3) Webpack ハッシュを使用してキャッシュを処理する: オンラインで公開されているファイルを変更する必要がある場合、再コンパイルされたファイル名が以前のバージョンと同じであると、ブラウザーがキャッシュされたファイルの認識とロードに失敗します。このように、キャッシュを防ぐためにハッシュ値を含むファイル名を自動的に生成する必要があります。詳細については、次を参照してください: https://segmentfault.com/a/1190000006178770#articleHeader7

(4) v-if を使用して不必要なコンポーネントのロードを削減します: v-if 命令は実際には非常に便利で、次の場合に一時的に不要にすることができます。私たちのプロジェクト コンポーネントはレンダリングされませんが、ポップアップ コンポーネントなど、必要なときにレンダリングされます。こうすることで、ページの最初の読み込み時間とファイル サイズを削減できます。

上記の最適化に加えて、多くの最適化オプションがあります。興味のある方は、webpack の API ドキュメントをよく見てください。結局のところ、webpack は非常に強力です。

データドリブンの例##

概要

この記事では、Vue.js の知識ポイントと開発プロセスをテキスト紹介付きの PPT 画像の形式で簡単に紹介し、

フロントを自動化します。 endとコンポーネントを軸に、エンジニアリングの概念が貫かれており、「シンプルだけど上品、小さいけど洗練されていない」というVue.js独特の魅力を浅いところから深いところまで解説しています

これらの事例を読んで、あなたはその方法をマスターしたと思います。 、もっとエキサイティングなphp中国語ウェブサイトの他の関連記事にもご注目ください。

関連書籍:

Video.js を使用して H5 ライブ ブロードキャスト インターフェイスを実装する

node.js のパス モジュールの詳細な説明

以上がVue.jsの詳細な図解説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。