vue.js ファミリー バケットには何が含まれますか?

vue.js ファミリー バケット パッケージには、1. [vue vuex] 状態管理、2. [vue-router] ルーティング、3. [vue-resource]、4. axios、5. UI フレームワークが含まれます。

【おすすめ関連記事: vue.js】

vue.js ファミリー バケットパッケージには以下が含まれます:

vue ファミリー バケット: vue vuex (状態管理) vue-router (ルーティング) vue-resource axios UI フレームワーク (iview、vant、elementUI など)

Vue vue-router (http://router.vuejs.org)、vuex (http://vuex.vuejs.org)、vue-resource (https://github.com/) などの有名な Family Bucket シリーズがあります。ページキット /vue-resource)。構築ツール vue-cli および sass style と組み合わせることで、完全な vue プロジェクトの中核コンポーネントとなります。

要約すると、1. プロジェクト構築ツール、2. ルーティング、3. 状態管理、4. http リクエスト ツールです。

以下は別の紹介です

前書き: Vue の 2 つの中心的なアイデア: コンポーネント化とデータ駆動型。コンポーネント化: 全体を再利用可能な個別に分割します。データ駆動: データの変更を通じて BOM 表示に直接影響し、DOM 操作を回避します。

1. Vue-cli は、このシングルページ アプリケーションを迅速に構築するための足場です。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

2. vue-router

インストール: npm installvue-router

モジュラー プロジェクトで使用する場合は、Vue.use() を通じてルーティング関数を明示的にインストールする必要があります:

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

また、使用中に次の点にも注意してください。 , Vue のトランジション属性を使用して、ページを切り替える効果をレンダリングできます。

3. vuex

vuex によって vue.js アプリケーション専用に開発された状態管理は、グローバル データ管理として理解できます。 Vuex は主に、ステート アクション、ミューテーション、ゲッター、マドルの 5 つの部分で構成されます。

使用手順は、上記4つの部分をコンポーネント内で直接呼び出すことができ、mudle、

1に加え、state

も同様のデータとなります。データとステータスを保存するために使用される vue オブジェクト。保存されたデータは応答性があり、データが変更されると、そのデータに依存するコンポーネントもそれに応じて変更されます。

状態を取得する 2 つの方法の例:

最初の方法:

store.getters['getRateUserInfo']

2 番目の方法:

...mapGetters({
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })

注: mapState を使用して変更できます。グローバル State とゲッターは、現在のコンポーネントの計算されたプロパティにマップされます。

2. アクション

アクションは、store.dispatch メソッドを通じてトリガーされます: アクションは非同期呼び出しをサポートし (API を呼び出すことができます)、ミューテーションは操作の同期のみをサポートし、アクションは直接の変更ではなくミューテーションを送信します。 。 州。

例:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 関数は、ストア インスタンスと同じメソッドとプロパティを持つコンテキスト オブジェクトを受け入れるため、context.commit を呼び出して変更を送信したり、コンテキストを渡したりできます。状態とコンテキスト。状態とゲッターを取得するためのゲッター。

実際には、コードを簡素化するために ES2015 パラメーターの構造化をよく使用します (特に何度も commit を呼び出す必要がある場合):

actions:{
  increment ({ commit }){
    commit('increment')
  }
}

3, mutation

各ミューテーションには次のような特徴があります。文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー)。このコールバック関数は、実際に状態を変更する場所であり、状態を最初のパラメータとして受け取ります。

4. Getters

Vuex を使用すると、ストア内で「ゲッター」を定義できます (ストアの計算されたプロパティとみなすことができます)。計算されたプロパティと同様に、ゲッターの戻り値は依存関係に従ってキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。

const getters = {
  getRateInitData: state => state.rateInitData,
  getchooseRateObj: state => state.chooseRateObj,
  getSearchRateParams: state => state.searchRateParams,
  getSearchRateResult: state => state.searchRateResult,
  getRateUserInfo: state => state.RateUserInfo,
  getMenuList: state => state.menuList,
  getRateQueryParams: state => state.rateQueryParams,
  getRateQueryResult: state => state.rateQueryResult,
  getCheckRateDetailParams: state => state.checkRateDetailParams,
  getReferenceCondition: state => state.referenceCondition,
  getWaitApprovalParams: state => state.waitApprovalParams
}

mapGetters ヘルパー関数

MapGetters ヘルパーこの関数は、ストア内のゲッターをローカルで計算されたプロパティにマップするだけです。

4. axios

axios は http リクエスト パッケージです。Vue 公式 Web サイトでは、http 呼び出しには axios を使用することを推奨しています。

インストール:

npm install axios --save

例:

1.GET リクエストを送信

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });
//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});

2.送信POST リクエスト

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

5。iview、vant、elementUI

iview などの UI フレームワークと一致します。Vue に基づく高品質の UI コンポーネント ライブラリのセット (分割されています)

vant は、軽量で信頼性の高いモバイル Vue コンポーネント ライブラリです。これは、Youzan によってオープンソース化された Vue 2.0 に基づくモバイル コンポーネント ライブラリのセットであり、開発をより速く、より簡単にすることを目的としています。 Vue ベースの使いやすいモバイル サイト。

Ant Design Vue は、エンタープライズ レベルのバックエンド製品を開発および提供する Ant Design の Vue 実装です。

elementUI は、Vue 2.0 デスクトップのミドルおよびバックエンド コンポーネント ライブラリに基づいています。

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上がvue.js ファミリー バケットには何が含まれますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。