vue項(xiàng)目總結(jié)
創(chuàng)建vue環(huán)境：https://blog.csdn.net/u013182762/article/details/53021374
引入jq：https://blog.csdn.net/u011025329/article/details/71721319
額外依賴包引入：cnpm install vuex(依賴包名) --save-dev,所有額外依賴包使用都需要在main.js中引入（import Vuex from 'vuex'）
vue生命周期詳解：https://segmentfault.com/a/1190000011381906
工具使用：vuex，axios
UI使用：elementUI
信息傳遞：query傳（this.$router.push({path:"/sds",query:{VISITPLANITEMS_ID:VISITPLANITEMS_ID,STATUS:STATUS }})），接（this.$route.query.VISITPLANITEMS_ID;）
路由跳轉(zhuǎn)：this.$router.push({path:"/indexPage"});
vue項(xiàng)目打包：npm run build,同時(shí)修改配置文件index.js的build節(jié)點(diǎn)，與router（路由）的配置信息 mode:"history",? base:"/hospital/app/（服務(wù)器根目錄下路徑）",
vuex使用：export default new Vuex.Store({
state: {
? ? ? ? PATIENTNAME:"",
? ? ? ? CASENO:"",
? ? ? ? ipConfig:"http://192.168.1.1:8080/",
? ? ? ? BZM:"",
? ? },
? ? mutations: {
? ? ? ? postInformation (state,obj) {
? ? ? ? ? ? state.PATIENTNAME=obj.PATIENTNAME;
? ? ? ? ? ? state.CASENO=obj.CASENO;
? ? ? ? ? ? state.BZM=obj.BZM;
? ? ? ? }
? ? },
? ? actions: {
? ? ? ? increment (context) {
? ? ? ? ? ? context.commit('increment')
? ? ? ? }
? ? }
})
vuex接收：this.$store.state.ipConfig;
vuex寫入：this.$store.commit('postInformation',{
? ? ? ? PATIENTNAME:res.data.varList[0].PATIENTNAME,
? ? ? ? CASENO:res.data.varList[0].CASENO,
? ? ? ? BZM:res.data.varList[0].BZM,
? ? ? ? })
axios使用（先引入案axios,依賴會(huì)造成this重定向，需提前記錄this指向，本次使用的是_that=this記錄this指向）：
POST方法 ==== axios.post(ip + "hospital/app/updateAll", {
ids: ids,
scores: scores,
APPRAISER: _that.answer,
TOTALSCORE: _that.sum,
visitPlanItemsID: visitPlanItemsID（ 請(qǐng)求參數(shù)）
}).then(function(res) {
回調(diào)方法
_that.$message({
type: 'success',
message: '保存成功!'
});
}).catch(function(err) {
_that.$message('請(qǐng)返回上一頁(yè)，重新進(jìn)入');
})
GET方法 === = axios.get(ip + "hospital/app/list", {
params: {
visitPlanItemsID: questionnaire_id
}
}).then(function(res) {
if(res.data != '') {
console.log(res);
}
}).catch(function(err) {
console.log(err);
_that.$message('請(qǐng)返回上一頁(yè)，重新進(jìn)入');
})
使用過(guò)程中總結(jié)：避開傳統(tǒng)jq思維，轉(zhuǎn)化為vue思想，利用vue原始方式進(jìn)行問(wèn)題解決，善于使用鉤子函數(shù)
? ? ? ? 在vue使用過(guò)程中，對(duì)于圖片處理以import方式導(dǎo)入或其它處理方式（需繼續(xù)研究）
? ? ? ? v-model數(shù)據(jù)綁定，對(duì)于select綁定方式綁定的是option節(jié)點(diǎn)
優(yōu)點(diǎn):優(yōu)化代碼量,便于協(xié)同開發(fā),使用方便
缺點(diǎn):遇到bug時(shí)調(diào)試不太方便
-----------------------待補(bǔ)充
