vue.js を使用する理由 フロントエンド開発者の 46% が vue.js を使用しているのはなぜですか?

一言で要約すると、データ バインディングのアイデアを使用して、Vue は単一のページ、大規模なフロントエンド システム、またはモバイル アプリのインターフェイスを簡単に作成できます。

1. Vue.js とは何ですか?

#● プログレッシブ フレームワーク

##● ボトムアップの増分開発設計

##● 習得が簡単

##● 統合が簡単

Vue.js (/vju?/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、Vue エコシステムによってサポートされる単一ファイル コンポーネントとライブラリを使用して開発された複雑な単一ページ アプリケーションを実行する能力を十分に備えています。

[推奨コース:

vuejs チュートリアル

]

2. vue.js はどのような種類のインターフェイスに適していますか?

a. フォーム項目が多いb. ユーザーの操作に合わせて内容を変更する必要がある

Vue.js はツールですZhihu に似た Web ページを構築するには、多くのフォーム項目があり、ユーザーの操作に基づいてコンテンツを変更する必要がある Web ベースのアプリケーションです。

3. シングル ページ アプリケーション (SPA) とは何ですか?

ページはアプリケーション (サブアプリケーション)名前が示すように、シングルページ アプリケーションは通常、アプリケーションであるページを指します。 、サブアプリケーションにすることもできます。たとえば、Zhihu のページはサブアプリケーションと見なすことができます。一般にシングルページアプリケーションでは対話的な処理が多く、ユーザーの操作に応じてページ上のコンテンツが動的に変化する必要があります。

4. JQuery を使用して、前述した Zhihu の Web バージョンを作成することもできます。なぜ Vue.js を使用する必要があるのでしょうか?

a. 製品は必ず繰り返し変更する必要があります b. 変更により DOM の関連付けとネスト レベルが変更される可能性があり、これにより関連するコードが変更されます非常に複雑な

c と vue.js がこの問題を解決できます

初めて JQuery を書いたときに ('#xxx').parent( と書いたことをまだ覚えていますか? ).parent ().parent() のようなコードはどうでしょうか?初めて書くときはページ内に要素が少ないと感じるので、この要素の父親の父親の父親を見つければいいだけではないでしょうか? この要素の父親の父親の父親を書いてもいいかもしれませんコメントで明らかに。しかし、数日後にプロジェクト チームのリーダーやプロダクト マネージャーが突然、作成した Web ページの変更を要求した場合、この変更要求はページの構造に影響を及ぼし、DOM の関連付けとネスト レベルが変更されます。 ('#xxx').parent().parent().parent() は $('#xxx').parent().parent().parent().parent().parent( ) になる場合があります。

これは大したことではありません。将来的には、製品のイテレーションがますます速くなり、より多くの変更が行われるようになり、ページ上に複数の同様の関連付けられたネストされた DOM 要素が存在し、変更が行われるようになります。非常に手間がかかります。さらに、JQuery セレクターによるページ要素の検索や DOM 操作自体もパフォーマンスが低下するため、おそらくこのページを開こうとしたときに、ますますスタックして開始できなくなる可能性があります。

この時点で Vue.js を学習していれば、こうした不満はもう存在しません。

5. フロントエンドでよく参照されるビュー レイヤーとは何ですか?

HTML の DOM を他の部分とは独立した層に分割することができ、この層をビュー層と呼びます。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てています

6. jquery を使用して完全なページを開発するプロセスは何ですか?

a、HTML 記述フレームワークb、CSS 装飾

c、js インタラクション

JQuery に関して言えば、 JavaScript の DOM 操作といえば、これが必要です。 JQuery を使用して Zhihu を開発する場合、JQuery のさまざまな DOM 操作メソッドを使用して、HTML の DOM 構造を操作する必要があります。

ここで Web ページ アプリケーションを抽象化します。HTML の DOM は実際にはビューです。Web ページは、DOM の組み合わせとネスト、そして CSS の変更を通じて、最も基本的なビュー構造を形成します。基本的なビュー構造は、より美しく見せるための「メイクアップ」です。最後に、インタラクティブな部分に関しては、JavaScript を使用してユーザーのインタラクティブなリクエストを受け入れ、イベント メカニズムを通じてユーザーのインタラクティブな操作に応答し、特定の DOM の変更などのイベント処理関数内のさまざまなデータを変更する必要があります。 innerHTML または innerText 部分。

7. Vue.js を使用すると、Web ベースのフロントエンド アプリケーションの開発が非常に便利になるのはなぜですか?

a、宣言型スタイルb、レスポンシブ データ バインディング

c、コンポーネント ベースの開発

d、仮想 DOM

Vue.js は宣言的で応答性の高いデータ バインディングとコンポーネント ベースの開発を備えており、また、名前を見ただけで豪華に聞こえるテクノロジである Virtual DOM も使用しているからです。

8. vue.js でよく言われる動的データ バインディングとは何ですか?

つまり、vue.js はデータの変更に自動的に応答し、ユーザーがコード内で事前に記述したバインド関係に従って、すべてのデータを変更し、バインドされたコンテンツを表示します。このバインディング関係は、図の input タグの v-model 属性によって宣言されているため、他の場所で vue.js を宣言型レンダリング テンプレート エンジンと大ざっぱに呼んでいる人がいるかもしれません。

9. フロントエンドでコンポーネント開発が必要なのはなぜですか?

a. 非コンポーネント開発コードとワークロードは非常に大きいです

b. 変更は死よりも悪いです

しかし、現在は単一ページで作業しています。アプリケーション、ページの操作、構造は非常に複雑です。ページ上に記述する必要があるモジュールが多数あり、モジュールのコード量と作業負荷が非常に大きくなることがよくあります。独自のメソッドに従って開発すると、疲れる。また、将来的に製品の要件が変わった場合、修正が非常に面倒で、一つのdivを移動すると他のdivが追随してページ全体がめちゃくちゃになったり、内部のDOMイベントがおかしくなったりするのではないかと心配です。 JavaScriptのイベントバブリング機構により関数が修正され、関数を処理した後に様々な不可解で奇妙なバグが発生します。

10. フロントエンドでコンポーネント開発を行うにはどうすればよいですか?

#a. オブジェクト指向バックエンドからモジュールのアイデアを借用します (いくつかの大きな関数を多数の関数に分割し、それらを開発のためにさまざまな担当者に割り当てます)

b単一ページのアプリケーション内のさまざまなモジュールを個別のコンポーネント (コンポーネント) に分割するには、最初に親アプリケーションにさまざまなコンポーネント タグを記述し (ピットを占有)、コンポーネント タグの中にコンポーネントに渡すパラメーターを記述するだけです。 (関数にパラメーターを渡すのと同じように、このパラメーターはコンポーネントの属性と呼ばれます)、その後、さまざまなコンポーネントの実装を個別に記述します (穴を埋めます)

オブジェクト指向プログラミングでは、次のように使用できます。さまざまなモジュールをクラスにパッケージ化したり、大規模なビジネス モジュールをより多くの小さなクラスに分割したりするオブジェクト指向の考え方。プロセス指向プログラミングでは、いくつかの大きな関数を多数の関数に分割し、それらを開発のために別の人に割り当てることもできます。

フロントエンド アプリケーションでは、プログラミングなどのモジュールもカプセル化できますか?ここではコンポーネント開発の考え方を紹介します。

Vue.js は、シングルページ アプリケーション内のさまざまなモジュールをコンポーネントを通じて個別のコンポーネントに分割します。最初に親アプリケーションにさまざまなコンポーネント タグを記述し ((落とし穴)、渡すパラメーターを記述するだけです)コンポーネントタグ内でコンポーネントに入力し（関数にパラメータを渡すのと同じように、このパラメータをコンポーネントの属性と呼びます）、その後、さまざまなコンポーネントの実装を個別に記述（落とし穴を埋める）すると、アプリケーション全体が完成します。

11. Virtual DOM テクノロジーがあるのはなぜですか?

a. 問題

現在、インターネットの速度はますます速くなり、多くの人が自宅に数十、さらには数百の光ファイバーを敷設しており、携帯電話には4G の使用も開始しました。Web ページがわずか数百 KB であり、ブラウザ自体が多くのリソース ファイルをキャッシュするのは当然のことですが、以前に開いたことのあるページを開くと依然として非常に遅く感じるのはなぜでしょうか。数十の M ファイバーを通じてキャッシュされていますか?

b. 理由

(1) DOM 処理時にブラウザ自体にパフォーマンスのボトルネックがある

(2) JQuery またはネイティブ JavaScript の DOM 操作関数を使用して DOM を操作する操作が頻繁に行われる場合、ブラウザは新しい DOM ツリーを継続的にレンダリングする必要があります。

これは、特に JQuery またはネイティブ JavaScript を使用した従来の開発において、DOM を処理する際にブラウザ自体にパフォーマンスのボトルネックがあるためです。DOM 操作関数が頻繁に操作を実行する場合、 DOM を使用すると、ブラウザは新しい DOM ツリーを継続的にレンダリングする必要があるため、ページが非常に固まって見えるようになります。

12. 仮想 DOM を実装するにはどうすればよいですか?

a. dom のさまざまな操作を事前計算し、最後の結果をレンダリングします (dom レンダリングの数を減らします)

そして、Virtual DOM は仮想 DOM です。簡単に言うと、事前にJavaScriptでさまざまな計算を行い、最終的なDOM操作を計算・最適化する方法ですが、このDOM操作は前処理であり実際にDOMを操作するわけではないため、仮想DOMと呼ばれます。最後に、計算が完了した後に実際に DOM 操作が送信され、DOM 操作の変更が DOM ツリーに反映されます。

13. シングルページ アプリケーション開発に Vue.js を使用するにはどうすればよいですか?

実際には、学習ビデオを見てすぐに始めることができ、それが最良のはずです

a. はじめに - vue.js の基本部分公式ドキュメントをしっかりと理解して、もう一度読んでください

私の提案は、最初に Introduction-vue.js 公式ドキュメントの基本的な部分を読むことです。難解な用語が多く含まれるコンポーネントのセクションを除いて、前の章ではテンプレート エンジンとして Vue.js を使用しているだけです。

b. ECMAScript6、Webpack、NPM、および Vue-Cli の基本的な使用法。Node.js についてある程度理解することが最善です。

その後、ECMAScript6、Webpack、NPM、および Vue-Cli の学習を開始します。基本的な使用方法については、Node.js についてある程度理解していることが最適です。

c. インターネット上のさまざまな実用的なビデオや記事、および他の人のオープンソースのソース コードを視聴する

最後に、コンポーネント部分を簡単に見てみましょう。コンポーネントの概念を理解した後、インターネット上のさまざまな実践的なビデオや記事、および他の人のオープンソースのソース コードを見始めます。

14. ECMAScript とは何ですか?

ECMAScript と JavaScript の関係は、前者が後者の仕様であり、後者が前者の実装であるということです (他の ECMAScript 方言には Jscript や ActionScript が含まれます)。日常的な状況では、これら 2 つの単語は置き換え可能です。

ECMAScript6 は、新世代の JavaScript 言語です。

15. Webpack とは何ですか?

a. フロントエンド パッケージング ツール

Webpack は、フロントエンドのパッケージ化および構築ツールです。これまでに HTML、CSS、JavaScript を手動で記述していて、link タグを使用して HTML ファイルに CSS を導入し、Script タグの src 属性を使用して外部 JS スクリプトを導入したことがある場合は、このツールに不慣れであることは間違いありません。 。それは構いません。まず、なぜ Webpack を使用する必要があるのか​​を理解してから、その理由を理解して勉強しましょう。

16. Webpack を使用する理由は何ですか?

a. さまざまな素材の管理が便利

b. ブラウザのアクセス数を減らすためのパッケージ化

前述したように、単一ページにするアプリケーション プログラム自体は非常に複雑で、実行時に多くのマテリアルや他のサードパーティ ライブラリを使用することは間違いありません。

前に述べたように、Webpack はフロントエンド パッケージ化ツールですが、なぜフロントエンド コードをパッケージ化する必要があるのでしょうか?単一ページのアプリケーションでは多くのマテリアルが使用されるため、各マテリアルが src 属性または HTML のリンクを介して導入される場合、ページをリクエストするときにブラウザーは 10 を超えるリクエストを開始する必要があり、多くの場合、これらのリソースがリクエストされます。すべてのスクリプト コードまたは非常に小さな画像。これらのリソース自体はわずか数キロバイトであり、ダウンロードには 1 秒もかかりません。ただし、HTTP はアプリケーション層プロトコルであるため、その下位層はトランスポート層プロトコルである TCP であり、 TCP のハンドシェイクとウェーブ。このプロセスは、リソース自体をダウンロードするよりも時間がかかる場合があるため、これらの小さなファイルをすべて 1 つのファイルにパッケージ化する必要があります。この方法では、複数のリソースを 1 回の TCP ハンドシェイクとウェーブ プロセスでダウンロードでき、複数のリソースをダウンロードできます。これらはすべて HTTP リクエストを共有するため、ヘッドやその他の部分も共有されます。これはスケール効果を形成することと同等であり、Web ページの表示が高速になり、ユーザー エクスペリエンスが向上します。

17. NPM と Node.js とは何ですか?彼らの関係は何ですか？

a. Node.js はサーバーサイド JavaScript 実行環境です

Node.js はサーバーサイド JavaScript 実行環境です。Node.js は次の目的で使用できます。 JavaScript に依存しないプログラムを作成します。

b. Node.js は独立したプログラムを作成できます (Webpack は Node.js によって作成されます)

前に述べたように、Webpack は Node.js によって作成されるため、フロントエンド開発として, 独立したプログラムを作成するために Node.js を使用しない場合でも、Node.js の実行環境が必要です。結局のところ、多くのフロントエンド ツールは Node.js を使用して作成されています。

c. NPM は、node.js パッケージ マネージャーです (Java の Maven (パッケージ依存関係管理) に似ており、PHP にも同様のものがあります)。

NPM は、node.js パッケージ マネージャーです。従来の開発ではJQuery.jsのほとんどをBaiduで検索して公式サイトからダウンロードしたり、CDNリソースを直接導入したりしていましたが、この方法は面倒でした。将来他のパッケージに遭遇した場合、このパッケージのコード自体が他のパッケージを呼び出す可能性があります (このパッケージは他のいくつかのパッケージに依存しているとも言われています)。その場合は、次のようなパッケージをプロジェクトに導入する必要があります。非常に難しい。 NPM パッケージ マネージャーを入手したので、

npm install xxx包名称

(例:

npm install vue

18) を介して直接導入できます。

vue.js のスキャフォールディング ツールです。率直に言うと、これはプロジェクト ディレクトリの生成、Webpack、およびさまざまな依存パッケージの構成を自動的に支援するツールです。

npm install vue-cli -g

を通じてインストールできます。次の -g はグローバル インストールを意味します。コマンドラインを開いた後、vue コマンドを通じて直接呼び出すことができます。

19. Vuex と Vue-route とは

Vuex は vue の状態マネージャーです。単一ページのアプリケーションでさまざまな状態を集中管理するために使用されます。

Vue-route は vue のフロントエンドルーターで、インターネットにアクセスするために使用するルーターではなく、リクエストエントリとページのマッピング関係を管理するものです。更新せずにページの一部を置き換えることができるため、ユーザーは Web ページに切り替わったように感じます。

この 2 つを明確に説明すると紙数が多くなってしまうので、ここでは簡単に説明しますが、最も重要なことは、まず vue.js 自体を学ぶことです。

以上がvue.js を使用する理由 フロントエンド開発者の 46% が vue.js を使用しているのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。