vue的风格指南

好记性不如烂笔头，总想看到的东西想记录一下。不是很全，因为有的不是很明白就没记录下来。

原文链接：https://cn.vuejs.org/v2/style-guide/

一 必要的 （如果您使用Vue就要用这样的风格，个人理解。。）

• 组件名为多个单词（防止重名-根组件除外）

Vue.component('todo-item', {
 // ...
})

• 组件数据（组件的data必须是一个函数-根组件除外）

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

• prop定义应该尽量详细（参数尽量补全）

    // 更好的做法！
    props: {
      status: {
        type: String,
        required: true,
        validator: function (value) {
          return [
            'syncing',
            'synced',
            'version-conflict',
            'error'
          ].indexOf(value) !== -1
        }
      }
    }

• 总是用 key 配合v-for。

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

• 永远不要把v-if和 v-for同时用在同一个元素上。

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

• 为组件设置局部作用域,对于应用来说，顶级App组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
    .button {
      border: none;
      border-radius: 2px;
    }

    .button-close {
      background-color: red;
    }
</style>

二 强烈推荐 （强烈推荐，可以使用，也可以不实用，使用的话是最好--增加可读性）

• 多个组件尽量不要写在同一个.vue文件中
• 单文件组件文件的大小写，单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
• 基础组件名，应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或V。

<template>
  <button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
    .button {
      border: none;
      border-radius: 2px;
    }

    .button-close {
      background-color: red;
    }
</style>

• 模版中尽量不要使用复杂的表达式，可以通过计算属性书写复杂的表达式

<!-- 在模板中html -->
{{ normalizedFullName }}


// 复杂表达式已经移入一个计算属性js
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

• 指令缩写 (用 : 表示 v-bind:和用 @ 表示 v-on:) 应该要么都用要么都不用。

三 推荐（推荐，可以使用，也可以不实用）

• 组件/实例的选项应该有统一的顺序。这是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新属性应该放到哪里。
  
  1. 副作用 (触发组件外的影响)
     
     • el:
  2. 全局感知 (要求组件以外的知识)
     
     • name:
     • parent:
  3. 组件类型 (更改组件的类型)
     
     • functional:
  4. 模板修改器 (改变模板的编译方式)
     
     • delimiters:
     • comments:
  5. 模板依赖 (模板内使用的资源)
     
     • components:
     • delimiters:
     • filters:
  6. 组合 (向选项里合并属性)
     
     • extends:
     • mixins:
  7. 接口 (组件的接口)
     
     • inheritAttrs:
     • model:
     • props/propsData
  8. 本地状态 (本地的响应式属性)
     
     • data:
     • computed:
  9. 事件 (通过响应式事件触发的回调)
     
     • watch:
     • 生命周期钩子 (按照它们被调用的顺序)
  10. 非响应式的属性 (不依赖响应系统的实例属性)
      
      • methods:
  11. 渲染 (组件输出的声明式描述)
      
      • template/render
      • renderError:
• 元素 (包括组件) 的特性应该有统一的顺序。
  
  1. 定义 (提供组件的选项)
     
     • is
  2. 列表渲染 (创建多个变化的相同元素)
     
     • v-for
  3. 条件渲染 (元素是否渲染/显示)
     
     • v-if
     • v-else-if
     • v-else
     • v-show
     • v-cloak
  4. 渲染方式 (改变元素的渲染方式)
     
     • v-pre
     • v-once
  5. 全局感知 (需要超越组件的知识)
     
     • id
  6. 唯一的特性 (需要唯一值的特性)
     
     • ref
     • key
     • slot
  7. 双向绑定 (把绑定和事件结合起来)
     
     • v-model:
  8. 其他特性 (所有普通的绑定或未绑定的特性)
  9. 事件 (组件事件监听器)
     
     • v-on
  10. 内容 (覆盖元素的内容)
      
      • v-html
      • v-text

四 谨慎使用（尽量少使用）

-元素选择器应该避免在scoped中出现。

<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>