博客

(个人记录)

必要

命名

• 组件名必写
• 组件名为多个单词
• 组件名为大驼峰

export default {
  name: 'TodoItem',
  // ...
}

组件数据

• data必须是函数

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

Prop定义

• 尽可能详细，写出类型和默认值

props: {
  status: {
    type: String,
    default: 'syncing'
  }
}

key值

• 在使用v-for时，必须写key值
• 尽可能使用后台主键或唯一值作为key
• 实在没办法选择使用index

<ul>
  <li v-for="todo in todos" 
      :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
//不推荐
<ul>
  <li v-for="(todo,index) in todos" 
      :key="index">
    {{ todo.text }}
  </li>
</ul>

v-if和v-for禁止同时使用在同一元素

<ul v-if="isAdd">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
//反例
<ul>
  <li
    v-for="user in users"
    v-if="isAdd"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

组件样式设置作用域

/* scoped属性 */
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>
/* css module */
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>
/* BEM */
.button_content--primary {
    background-color: red;
}

<template>
    <div class="home"> 
        ...
    </div>
</template>
<style lang="scss">
.home {
  border: none;
  border-radius: 2px;
  .button-close {
    background-color: red;
  }
}
</style>

推荐

能拆分组件，尽量拆分组件

尽量不要让单文件超过500行，否则阅读起来非常困难，想办法提取组件

将组件拆分成单独文件，不要写在同一文件

// 反例
Vue.component('TodoList', {
  // ...
})

组件分为公共组件和局部组件

• 公共组件放入components文件夹中，通过Vue.use全局引入，方便使用
• 局部组件放入局部的文件夹内，防止影响别人的阅读

components/
|- TodoList/
    |- TodoItem.vue
    |- index.vue
views/
|- Home/
    |- Nav.vue
    |- index.vue

文件大小写

尽量用大驼峰或者-联接线

components/
|- MyComponent.vue
components/
|- my-component.vue