Was ist der Familien-Bucket von vue.js?

vue.js Familien-Bucket ist die Kernkomponente des gesamten Vue-Projekts, einschließlich der Stile Vue-Router, Vuex, Vue-Resource, Vue-Cli und Sass. vue-cli ist ein Gerüst für die schnelle Erstellung von Single-Page-Anwendungen.

Vue-Familien-Bucket:

Enthält Vue-Router, Vuex, Vue-Ressource sowie das Build-Tool Vue-Cli im Sass-Stil. Dies sind die Kernkomponenten eines vollständigen Vue-Projekts.

(Lernvideo-Sharing: Javascript-Video-Tutorial)

Um es zusammenzufassen:

1. Projekterstellungstool; 3. Statusverwaltung;

Detaillierte Einführung:

Vues zwei Kernideen: Komponentisierung und datengesteuert.

Komponentisierung: Teilen Sie das Ganze in wiederverwendbare Einzelstücke 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, müssen Sie Vue.use( ) Installieren Sie die Routing-Funktion explizit:

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 eine speziell für vue.js-Anwendungen entwickelte Zustandsverwaltung, die als globale Datenverwaltung 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:

(1)

store.getters['getRateUserInfo']

(2)

...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 (Sie können die API aufrufen), Mutationen unterstützen nur die Operationssynchronisierung und die Aktion übermittelt eine Mutation, 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 mehrmals aufrufen müssen):

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

3, Mutation

Jede Mutation hat einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler). 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 als berechnete Eigenschaften des Stores betrachtet werden können). Genau wie bei berechneten 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:

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
}

Beispiel:

(1) Senden Sie eine GET-Anfrage

npm install axios --save

(2) Senden Sie eine POST-Anfrage

//通过给定的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);
});

Verwandte Empfehlungen:

vue.js Tutorial

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