其他分享
首页 > 其他分享> > Vue页面的构成

Vue页面的构成

作者:互联网

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,若关闭页面则不返回。

标签:destroyed,Vue,oms,init,import,data,构成,页面
来源: https://www.cnblogs.com/luoyihao/p/14343177.html