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，若關閉頁面則不返回。