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>