举报投诉联系我们 手机版 热门标签 VUE中文网
您的位置:VUE中文网 > vant入门教程 Vant 风格指南

vant入门教程 Vant 风格指南

2023-06-01 15:17 Vant中文教程

vant入门教程 Vant 风格指南

vant入门教程 Vant 风格指南

vant入门教程

介绍

在参与 Vant 开发时,请遵守约定的单文件组件风格指南,指南内容节选自 Vue 官方风格指南。

组件数据

组件的 data 必须是一个函数。

// bad
export default {
  data: {
    foo: "bar"
  }
}

// good
export default {
  data () {
    return {
      foo: "bar"
    }
  }
}

单文件组件文件名称

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。

// bad
mycomponent.vue
myComponent.vue

// good
my-component.vue
MyComponent.vue

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue

// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue

自闭合组件

在单文件组件中没有内容的组件应该是自闭合的。

<!-- bad -->
<my-component></my-component>

<!-- good -->
<my-component />

Prop 名大小写

在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。

// bad
export default {
  props: {
    "greeting-text": String
  }
};

// good
export default {
  props: {
    greetingText: String
  }
}
<!-- bad -->
<welcome-message greetingText="hi" />

<!-- good -->
<welcome-message greeting-text="hi" />

Props 换行

多个 Props 的元素应该分多行撰写,每个 Props 一行,闭合标签单起一行。

<!-- bad -->
<my-component foo="a" bar="b" baz="c" />

<!-- good -->
<my-component
  foo="a"
  bar="b"
  baz="c"
/>

指令缩写

指令缩写,用 : 表示 v-bind: ,用 @ 表示 v-on:

<!-- bad -->
<input
  v-bind:value="value"
  v-on:input="onInput"
>

<!-- good -->
<input
  :value="value"
  @input="onInput"
>

Props 顺序

标签的 Props 应该有统一的顺序,依次为指令、属性和事件。

<my-component
  v-if="if"
  v-show="show"
  v-model="value"
  ref="ref"
  :key="key"
  :text="text"
  @input="onInput"
  @change="onChange"
/>

组件选项的顺序

组件选项应该有统一的顺序。

export default {
  name: "",

  mixins: [],

  components: {},

  props: {},

  data() {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
};

组件选项中的空行

组件选项较多时,建议在属性之间添加空行。

export default {
  computed: {
    formattedValue() {
      // ...
    },

    styles() {
      // ...
    }
  },

  methods: {
    onInput() {
      // ...
    },

    onChange() {
      // ...
    }
  }
};

单文件组件顶级标签的顺序

单文件组件应该总是让顶级标签的顺序保持一致,且标签之间留有空行。

<template>
...
</template>

<script>

</script>

<style>

</style>


实例演示

阅读全文
以上是VUE中文网为你收集整理的vant入门教程 Vant 风格指南全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 VUE中文网 vue88.com 版权所有 联系我们