Vue页面代码简化如下:
<template>
<div>
</div>
</template>
<script>
import * as service from "@/modules/oms/api/oms/eventForm";
import changeOrder from "@/modules/oms/utils/changeOrder.js";
import warningMessage from "@/modules/oms/views/components/warningMessage";
export default {
name: "Event",
components: {
warningMessage
},
mixins: [changeOrder],
data() {
return {
enumOptions: {},
ruleForm:{}
};
},
computed: {
showOptionsEnum() {
// if the optionsEnum has data
return Object.keys(this.enumOptions).length > 0;
}
},
watch: {
"ruleForm.eventPriority": function(val, oldVal) {
this.calculateDeadTime();
}
},
mounted() {
this.init();
//页面刷新调用
window.onbeforeunload = function() {
return true;
};
},
destroyed() {
window.onbeforeunload = null;
},
created() {
},
methods: {
async init() {
this.queryEventInGroup();
this.queryParams();
},
getMsg(data){
this.ruleForm.message = data
},
queryEventInGroup(){
},
queryParams(){
},
calculateDeadTime(val) {
}
}
};
</script>
<style lang="scss">
</style>
我们对其进行分析。
1.页面分为template、script、style,<template>里放置html代码,<script>里放置脚本,<style>放置css(可为less或scss)。
2.import从api文件夹下导入接口请求方法集合即service,导入组件。
3.export导出name、components、mixins(混入)、data、computed(计算属性)、watch(监视属性,可用于监视下拉框值变化)、methods。
4.export导出Vue生命周期方法,执行顺序为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、 beforeDestory、destroyed。
5.一般是在mounted中调用init方法,对页面进行数据拉取。init可设置为async,即异步函数。异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
6.在页面刷新时,页面不会进行destroyed,所以用onbeforeunload函数(刷新或关闭页面调用),若页面刷新则返回true,若关闭页面则不返回。