Heim > Web-Frontend > View.js > Hauptteil

Was ist der Familien-Bucket von vue.js?

王林
Freigeben: 2020-11-25 14:19:19
Original
6011 Leute haben es durchsucht

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.

Was ist der Familien-Bucket von vue.js?

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
Nach dem Login kopieren

2. vue-router

Installation:

npm installvue-router
Nach dem Login kopieren

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)
Nach dem Login kopieren

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']
Nach dem Login kopieren

(2)

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

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')
    }
  }
})
Nach dem Login kopieren

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')
  }
}
Nach dem Login kopieren

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
}
Nach dem Login kopieren

Beispiel:

(1) Senden Sie eine GET-Anfrage

npm install axios --save
Nach dem Login kopieren

(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);
});
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!