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
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!