vue組件規範

<!-- 單文件組件應該總是讓頂級標籤的順序保持一致，且標籤之間留有空行 -->
<template>
  <!-- 多個動態屬性需分爲多行 -->
  <!-- 統一使用指令縮寫 : @ -->
  <!-- 標籤的 Props 應該有統一的順序，依次爲指令、屬性和事件 -->
  <my-component
    v-if="if"
    v-show="show"
    v-model="value"
    ref="ref"
    :key="key"
    :text="text"
    @input="onInput"
    @change="onChange">
    <!-- 儘量將v-for/v-if提取到單獨template中 -->
    <!-- v-for 必須增加 key -->
    <template v-if="foo">
      Hello A
    <template>
    <template v-else>
      Hello B
    <template>
  </div>
</template>

<script>
import MyComponent from '../my-component'

// options須嚴格按照如下順序，其他可參考vue-style-guide
export default {
  
  name: '',

  mixins: [],

  components: {
    [MyComponent.name]: MyComponent
  },

  // props須以明細方式書寫
  // 統一採用事件觸發，避免使用props傳入回調方法
  props: {
    // js中prop屬性需用駝峯
    greetingText: {
      type: String,
      default: 'primary'
    }
  },

  // data必須爲函數
  data () {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  activated() {},

  deactivated() {},

  beforeDestroy() {},

  destroyed() {},

  methods: {}
}
</script>

<style lang="scss" scoped>
  .date-picker {
    xxx
  }
</style>