vue项目总结
创建vue环境：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;）
路由跳转：this.$router.push({path:"/indexPage"});
vue项目打包：npm run build,同时修改配置文件index.js的build节点，与router（路由）的配置信息 mode:"history", base:"/hospital/app/（服务器根目录下路径）",
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,依赖会造成this重定向，需提前记录this指向，本次使用的是_that=this记录this指向）：
POST方法 ==== axios.post(ip + "hospital/app/updateAll", {
ids: ids,
scores: scores,
APPRAISER: _that.answer,
TOTALSCORE: _that.sum,
visitPlanItemsID: visitPlanItemsID（ 请求参数）
}).then(function(res) {
回调方法
_that.$message({
type: 'success',
message: '保存成功!'
});
}).catch(function(err) {
_that.$message('请返回上一页，重新进入');
})
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('请返回上一页，重新进入');
})
使用过程中总结：避开传统jq思维，转化为vue思想，利用vue原始方式进行问题解决，善于使用钩子函数
在vue使用过程中，对于图片处理以import方式导入或其它处理方式（需继续研究）
v-model数据绑定，对于select绑定方式绑定的是option节点
优点:优化代码量,便于协同开发,使用方便
缺点:遇到bug时调试不太方便
-----------------------待补充
网友评论