<!-- 单文件组件应该总是让顶级标签的顺序保持一致,且标签之间留有空行 -->
<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>