コーススケジュール
目次
1. Vueの基本概念
(1) Vueとは
Vue (/vju:/ と発音) は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。ボトムアップで適用されます。Vue のコア ライブラリは、ビュー レイヤのみに焦点を当てています。簡単に始めることができ、使用することができますプロジェクトを統合して、複雑な単一ページ アプリケーションを作成できます。簡単に言うと、vue はフロントエンド開発フレームワークのセットであり、vue は現在 3 つの主流フレームワークの 1 つであり、他の 2 つのフレームワークは React、Angular です。
(2) フロントエンド開発フレームワーク登場の意義
Vue、React、Angular などのフロントエンド フレームワークの登場により、フロントエンド開発はより標準化され、より便利になりました。この利点は、フロントエンド エンジニアリング、フロントエンドとバックエンドの分離 (双方向データ バインディング)、コンポーネント開発に現れます。
1. フロントエンドエンジニアリング
フロントエンド エンジニアリングは、一般的なソフトウェア開発概念です。おそらく多くの友人は、フロントエンドを学ぶときに Html、Css、JavaScript から始めますが、学習して使用する過程で、そのような開発には多くのコードを繰り返し記述する必要があることに気づくでしょう。 Css または JavaScript 設定ファイルの数が少ないと、Css または JavaScript 設定ファイルの競合や相互干渉の問題が発生し、開発や デバッグに多くの問題が発生し、何が含まれているかを見つけることができない可能性があります。長い間間違っていました、要するに、もっと厄介です。
フロントエンドエンジニアリングは、アピールにおけるこれらの問題を解決するための、特定の生産および開発環境向けのソリューションです。フロントエンドエンジニアリングには次のものが含まれます。 エンジニアリングの目的は、開発効率を向上させ、開発品質を確保することです。
1) 標準化、つまり、クラスの命名規則、コーディングテンプレートコードの策定など、開発ルールや開発標準を策定または合意すること。設定よりも規則を提唱します (vue、springboot などには、構成よりも規則が存在します)。構成仕様)
2) 定量化可能なプロセス手法とは、簡単に言うと、開発プロセス全体と進捗状況を測定する手法を策定することです。
3) コードの更新を管理するバージョン管理
4) 開発に使用された技術および手法。
2. フロントエンドとリアエンドの分離
フロントエンド: View (ビュー層) および Controller (ビジネスモジュールプロセス制御層) を担当します。
バックエンド: Model レイヤー、ビジネス、データ処理などを担当します。
この利点は、バックエンドの開発を妨げることなく、ビジネス ニーズに応じてフロントエンドの UI のデザインを変更でき、バックエンドはバックエンドに集中できることです。エンドインターフェイスは問題ありません。
3. コンポーネント開発
コンポーネントベースの開発により、フロントエンドで繰り返し使用されるコードを個別に抽出して、プロジェクト全体の各ページで使用するコンポーネントにすることができ、Css および JavaScript スクリプトの内容によって動作範囲が制限されるため、開発上の競合に関する質問を大幅に減らす
2. Vue の開発で使用される概念
(1)MVVM
1. Model、View、ViewModelの略称です。
MVVM パターンは MVC パターンと同じです。主な目的はビュー (View) とモデル (Model) を分離することです。いくつかの利点があります。
1) 低結合。ビュー (View) は Model とは独立して変更および修正できます。 ViewModel は別の "View" にバインドできます。 View が変更されると、Model は変更できません。 Model が変更されると、View も変更できます。
2) 再利用性。ViewModel にビュー ロジックを入れて、多くの view でこのビュー ロジックを再利用できます。
3) 独自開発。開発者はビジネス ロジックとデータ (ViewModel) の開発に集中でき、デザイナーはページのデザインに集中できます。Expression を使用すると、Blend でインターフェイスを簡単に設計し、xaml コードを生成できます。
4) テスト可能。インターフェイスのテストは常に困難でしたが、現在では ViewModel に対してテストを作成できるようになりました。
2. MVVMのModel、View、ViewModel部門
1) View
インターフェイスと表示を担当するインターフェイス コンポーネントには、window、controls、page、dataTemplete、custom controls が含まれます。DataContext および ViewModel を介したバインドは、Model と直接対話しません。コントロールは ViewModel のパブリック プロパティにバインドできます。update には双方向バインディングが必要です。コントロールは Behavior/Command をトリガーして ViewModel メソッドを呼び出すことができます。Command は View から ViewModel への一方向通信です (イベントのトリガー) View で、ViewModel でイベントを処理します)
2) ViewModel
これには主に、インターフェイス ロジックとモデル データのカプセル化、Behavior/Command イベント応答、バインドされた属性定義などが含まれます。 ViewModel は Model クラスを継承するか、Model の継承クラスが view と model の間のブリッジになります。 Model 抽象化へのブリッジ。たとえば、model のデータ形式が「年 月 日」である場合、ビュー (view) で表示するために model のデータを viewModel の「日 月 年」に変換できます。
3) モデル
データおよびビジネス ロジックのクライアント ドメイン モデルは、プロパティまたはコレクションを実装できる data entities、business objects、repositories および services change notification で構成されます。
2. Vue開発に関わる概念
webpackはモジュール バンドラーです。その主な目的は、ブラウザで使用できるように JavaScript ファイルをパッケージ化することです。
vue-router: アプリケーションのルーティング マップ
vuex: Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中ストレージを使用してアプリケーションのすべてのコンポーネントの状態を管理し、対応するルールを使用して状態が予測可能な方法で変化することを保証します。
axios: Promise ベースの HTTP リクエスト クライアント。ブラウザと Node.js の両方で利用可能
ES6: ECMAScript 6 (以下、ES6) は、JavaScript 言語の次世代標準です。ES6 の現在のバージョンは 2015 年にリリースされたため、ECMAScript 2015 とも呼ばれます。
babel: Babel は JavaScript コンパイラーです。さまざまなブラウザを実行できるように ES6 を ES5 に変換するために使用されます