Was beinhaltet der vue.js-Familien-Bucket?

vue.js-Familien-Bucket-Paket umfasst: 1. [vue + vuex]-Zustandsverwaltung; 2. [vue-router]; 5. UI-Framework.

【Empfohlene verwandte Artikel: vue.js】

vue.js Familien-Bucket-Pakete umfassen:

vue-Familien-Bucket: vue + vuex (Zustandsverwaltung) + vue-router (Routing) + vue-resource +axios +UI-Framework (iview, vant, elementUI usw.)

Vue verfügt über eine berühmte Familien-Bucket-Serie, darunter vue-router (http://router.vuejs.org), vuex (http:/ /vuex.vuejs.org), vue-resource (https://github.com/pagekit/vue-resource). In Verbindung mit dem Build-Tool vue-cli und dem Sass-Stil ist es die Kernkomponente eines vollständigen Vue-Projekts.

Zusammenfassend handelt es sich um: 1. Projektkonstruktionstool, 2. Routing, 3. Statusverwaltung, 4. HTTP-Anfragetool.

Im Folgenden separat vorgestellt

Vorwort: Die beiden Kernideen von Vue: Komponentisierung und datengesteuert. Komponentisierung: Teilen Sie das Ganze in wiederverwendbare Einzelpersonen auf, datengesteuert: Beeinflussen Sie die Stücklistenanzeige direkt durch Datenänderungen und vermeiden Sie DOM-Operationen.

1. Vue-cli ist das Gerüst zum schnellen Erstellen dieser Einzelseitenanwendung,

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

2. vue-router

Installation: npm installvue-router

Wenn Sie es in einem modularen Projekt verwenden, Sie müssen die Routing-Funktion explizit über Vue.use() installieren:

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

Beachten Sie außerdem, dass Sie während der Verwendung das Übergangsattribut von Vue verwenden können, um den Effekt des Seitenwechsels darzustellen.

3. vuex

vuex ist ein speziell für vue.js-Anwendungen entwickeltes Zustandsmanagement, das als globales Datenmanagement verstanden werden kann. Vuex besteht hauptsächlich aus fünf Teilen: Zustandsaktion, Mutation, Getter und Mudle.

Der Verwendungsprozess ist: Die oben genannten vier Teile können direkt in der Komponente aufgerufen werden. Zusätzlich zu Mudle ähneln

1 und State

Daten Vue-Objekten, die zum Speichern von Daten und Status verwendet werden. Die gespeicherten Daten reagieren. Wenn sich die Daten ändern, ändern sich auch die Komponenten, die auf die Daten angewiesen sind.

Beispiele für zwei Möglichkeiten, den Status zu erhalten:

Erster Weg:

store.getters['getRateUserInfo']

Zweiter Weg:

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

Hinweis: Globaler Status und Getter können über „mapState“ den berechneten Eigenschaften der aktuellen Komponente zugeordnet werden.

2. Aktionen

Aktion wird durch die Methode store.dispatch ausgelöst: Aktion unterstützt asynchrone Aufrufe (API kann aufgerufen werden), Mutationen unterstützen nur die Operationssynchronisierung und Aktionen übermitteln Mutationen, anstatt den Status direkt zu ändern.

Zum Beispiel:

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

Die Action-Funktion akzeptiert ein Kontextobjekt mit denselben Methoden und Eigenschaften wie die Store-Instanz, sodass Sie context.commit aufrufen können, um eine Mutation zu übermitteln, oder Status und Getter über context.state und context abrufen können. Getter.

In der Praxis verwenden wir häufig die ES2015-Parameterdestrukturierung, um den Code zu vereinfachen (insbesondere, wenn wir Commit viele Male aufrufen müssen):

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

3, Mutation

Jede Mutation hat einen String-Ereignistyp ( Typ) und eine Rückruffunktion ( Behandler). Mit dieser Rückruffunktion nehmen wir tatsächlich die Zustandsänderungen vor und sie akzeptiert den Zustand als ersten Parameter.

4. Getter

Vuex ermöglicht es uns, „Getter“ im Store zu definieren (die man sich als berechnete Eigenschaften des Stores vorstellen kann). Genau wie berechnete Eigenschaften wird der Rückgabewert eines Getters entsprechend seinen Abhängigkeiten zwischengespeichert und nur dann neu berechnet, wenn sich seine Abhängigkeitswerte ändern Getter wird einer lokal berechneten Eigenschaft zugeordnet.

4. axios

axios ist ein http-Anfragepaket, das die Verwendung von axios für http-Aufrufe empfiehlt. Installation:

npm install axios --save

1. Senden Sie eine GET-Anfrage

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
}

5. Passen Sie UI-Frameworks an, z. B.: iview, vant, elementUI

iview ist eine Reihe hochwertiger UI-Komponentenbibliotheken, die auf Vue basieren (unterteilt in verschiedene Versionen wie Applets und PC-Versionen);

vant ist eine leichte und zuverlässige mobile Vue-Komponentenbibliothek, die auf einem Open-Source-Set basiert auf Vue 2.0 Die Mobile-Komponentenbibliothek soll es schneller und einfacher machen, schöne und benutzerfreundliche mobile Websites auf Basis von Vue zu entwickeln.

Ant Design Vue ist die Vue-Implementierung von Ant Design, das Backend-Produkte auf Unternehmensebene entwickelt und bereitstellt. elementUI basiert auf der Desktop-Middle- und Backend-Komponentenbibliothek Vue 2.0.

Verwandte kostenlose Lernempfehlungen:

JavaScript

(Video)

Das obige ist der detaillierte Inhalt vonWas beinhaltet der vue.js-Familien-Bucket?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!