Vueの紹介と応用

目次

概要

Vue基礎構文

指令

計算属性、リスナーおよびフィルタ

アセンブリ

コンポーネント通信

ライフサイクル

vue-router

vuex

構築アプリケーション

概要
Vueはユーザインタフェースを構築するUIフレームワークである.Vueのコアライブラリは、ビューレイヤのみに注目し、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も容易です.簡単なapiによって応答式のデータバインディングと組合せビューコンポーネントを実現し、Vueの核心はデータバインディングシステムである.Vueの特性は以下の通りである.

軽量級フレーム(圧縮後数十kbのみ)

指令

双方向データバインディング

多重性(コンポーネント)

デカップリングデータとビュー(データ駆動ビュー)

仮想Dom(Dom Diffアルゴリズムによるパフォーマンス向上)

フロントエンドルーティング

状態管理

Vee基礎構文
インストラクション
v-textは、テキスト補間に使用される二重カッコに等しい.v-htmlは本物のhtmlを出力し、要素のinnerHTMLを更新します.v-show/ifは要素を表示または非表示にし、v-showはdisplayプロパティで実現され、v-ifは毎回新規または削除されます.v-forは配列またはオブジェクトをループし、templateでグループ化できます.v-bindは、プロパティを式に動的にバインドするために使用されます.v-onはイベントリスナーをバインドし、イベント修飾子をサポートします.v-modelはinput、select、text、checkboxなどのフォームコントロール要素で双方向データバインドを実現するために使用されます.v-onceは、このコマンドの要素またはコンポーネントとそのすべてのサブノードを使用して、一度だけレンダリングされます.v-slotは、名前スロットと役割ドメインスロットを備えています.カスタムコマンド:Vue.Directiveはコマンドをカスタマイズできます.
プロパティ、リスナー、フィルタの計算

計算プロパティcomputed vueテンプレート内の式は簡単な演算をサポートしますが、式が複雑な場合、メンテナンスが困難になります.計算属性はこの問題を解決することができ,1つの計算属性では複雑な論理演算,関数呼び出しなどを行うことができ,最終的には1つの結果を返すだけである.各計算プロパティにはgetterとsetterが含まれます.必要に応じてsetter関数を設定し、計算プロパティを手動で変更するとsetter関数がトリガーされます.

リスナーwatch Vueは、Vueインスタンス上のデータ変動を観察し、応答するための一般的な方法を提供する:リスナー属性watch、watchオブジェクトでは、キーはリスナー変数であり、値は変数変化時に呼び出される関数であり、関数は2つのパラメータを受信し、1つ目は変化前の値であり、2つ目は変化後の値である.

フィルタfilter Vueは、一般的なテキストフォーマットのためのフィルタを提供します.フィルタは、二重カッコ補間とv-bind式の2つの場所で使用できます.フィルタはJavaScript式の末尾に追加されるべきで、「パイプ」記号で示され、コンポーネント内でfilterオプションでカスタムフィルタを作成できます.

コンポーネント

Vueの多重性はコンポーネントに現れ、コンポーネントはHTML要素を拡張し、再利用可能なコードをカプセル化することができる.

コンポーネントが登録されてから使用できます.

グローバルコンポーネントVueを登録する.component(tagName, options).

ローカルコンポーネントを登録Vueインスタンスでcomponentsオプションでローカルコンポーネントを登録します.

コンポーネントのdataは関数である必要があります.

コンポーネントのテンプレートにはルート要素が1つしかありません.

のコンポーネントは、データとビューに分けることができ、データが更新されると、ビューも自動的に更新されます.ビューでイベントをバインドし、ユーザーの操作に基づいてmethodsで定義されたメソッドをトリガーして、データを変更し、ビューを更新できます.

コンポーネント通信
Vueは、コンポーネント通信、親子コンポーネントの通信、兄弟コンポーネントの通信、階層間コンポーネントの通信など、さまざまな方法でサポートされています.

props:親コンポーネントはサブコンポーネントにデータを渡し、サブコンポーネントは親コンポーネントでラベルとして導入され、ラベルの属性を設定することによってデータを渡し、サブコンポーネントでpropsで受け入れる.

パブリッシュサブスクリプションモード:サブコンポーネントは親コンポーネントにデータを渡し、親コンポーネントonはイベントをバインドし、サブコンポーネントemitはこのイベントをトリガーします.

時間バスbus:bus.$を通る中央イベントバス(bus)として空のVueインスタンスを使用onリスニングとbus.$Emitは、親子コンポーネント、兄弟コンポーネント、クロスレベルコンポーネントを含む任意のコンポーネント間の通信を行うことができるデータ伝達をトリガする.

依存注入:Vueは依存注入を提供し、世代コンポーネントにわたってデータを段階的に伝達することを可能にする.Provideオプションは、転送するデータを指定し、子孫コンポーネントでinjectオプションで受け入れます.

ライフサイクル
Vueインスタンスは、作成から破棄まで完全なライフサイクルがあります.各コンポーネントには、作成の開始、テンプレートのコンパイル、Domのマウント、レンダリング前→更新→レンダリング後、破棄などの一連のプロセスがあります.Vueは8つの応答のフック関数を提供し,対応する時期に操作を容易にする.

beforeCreate関数domはまだマウントされておらず、データと実際のdomにアクセスできません.

created関数domはまだマウントされておらず、データは初期化されています.

beforeMount関数仮想domが作成され、すぐにレンダリングされます.

mounted関数domがマウントされ、コンポーネントがページに表示されます.

beforeUpdate関数データの変更後、diffアルゴリズムはまだ行われていません.

updated関数データの変更が完了し、domも再renderが完了し、更新後の仮想domを操作できます.

beforeDestroy関数が$destroyメソッドを呼び出した後.

destroyed関数コンポーネントのデータバインド、傍受などは破棄されました.

vue-router
vue-routerは、公式メンテナンスのルーティングマネージャであり、Vueと高度に統合され、単一ページアプリケーションの構築をより簡単にします.vue-routerの原理は、異なるページに異なるコンポーネントがロードされ、プログラムの実行時に現在のルーティングに基づいて異なるコンポーネントが動的にレンダリングされ、ルーティングの切り替え時に、マウントされたコンポーネントが切り替えられ、他の内容は変化しません.
基本的な使い方

npm install vue-router --save
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
      //    
})
new Vue({
  el:'#app',
  router:router,
  render:h=>{return h(app)}
})

動的ルーティング:あるモードが一致するすべてのルーティングが、同じコンポーネントにマッピングされます.ネストされたルーティング:多層ネストに対応します.コマンドルーティング:ルーティングをリンクしたりジャンプを実行したりするためにルーティングに名前を付けます.プログラミングナビゲーション:ナビゲーションのほか、routerのインスタンスメソッドを使用してジャンプすることもできます.リダイレクトとエイリアス:ルーティングでredirectとaliasを構成してリダイレクトとエイリアスの効果を実現します.名前付きビュー:複数のビューを兄弟で表示します.Historyモード:ページ内のurlを美化し、バックグラウンド構成のサポートが必要です.
vuex
コンポーネント通信ではbus,prop,依存注入などの方式があり,vueの状態管理プラグインvuexを用いることもできる.
基本的な使い方

npm install vuex --save    

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new store({
      //vuex  
})

new Vue({
  el:'#app',
  store:store,
  render:h=>{return h(app)}
})

storeはアプリケーションのデータ状態と操作手順を保存し、コンポーネントがstoreのデータを使用する限り、storeデータが変化すると、対応するコンポーネントもすぐに更新されます.storeはstate、mutationsなどのオプションを提供し、必要な操作を構成します.
storeのstateオプションは$storeを介してデータを保存します.stateはデータを取得します.storeのmutationsオプションは、$storeを介してstateのデータを直接変更するために使用されます.commitメソッドはmutationsを実行します.storeのgettersオプションは、$storeを介してデータ抽出後の複雑な操作をカプセル化するために使用されます.store.gettersはデータを取得します.storeのactionsオプションは、$storeを介してstateのデータを非同期で変更するために使用されます.dispatchトリガ.storeのmodulesオプションは、storeを異なるモジュールに分割するために使用されます.プロジェクトが非常に複雑な場合、storeのオプションにはデータが非常に多く、メンテナンスが困難であり、modulesを使用すると異なるファイルに分けることができ、各modulesには独自のstate、mutations、actions、gettersがあります.
アプリケーションの構築
vue-cliに基づいてvueアプリケーションを迅速に構築

npm install-g vue-cli

をインストール

初期化プロジェクトvue init webpack projectオプション構成cd projectオープンプロジェクトnpm installインストールnpmパッケージnpm run dev起動プロジェクトVueプロジェクト

を迅速に構築

vue elementコンポーネントライブラリnpm install element-uiインストールelement import ElementUI from"element-ui"import"element-ui/lib/theme-chalk/indexを導入する.css’ Vue.use(ElementUI)

vue iviewコンポーネントライブラリnpm install iview--saveインストールiview import iView from“iview”;import ‘iview/dist/styles/iview.css’; Vue.use(iView);

vue-cli 3 TypeScriptを使用して新しいエンジニアリングインストールvue-cli 3 npm install--global@vue/cli新しいエンジニアリングvue create my-project-name選択Manually select featuresオプション構成

を作成できます.