vue风格指南

组件名应该始终是多个单词的， 根组件 App 以及 、 之类的 Vue 内置组件除外。

这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

Vue.component('todo-item',{})
export default{name:'TodoItem', }

组件的 data 必须是一个函数。
当在组件中使用 data property 的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。
当 data 的值是一个对象时，它会在这个组件的所有实例之间共享。每个实例必须生成一个独立的数据对象。在 JavaScript 中，在一个函数中返回这个对象就可以了。

Vue.component('some-comp',{
  data:function(){
   return{
     foo:'bar'  
   }
 }
})
// In a .vue file
export default{
  data(){
    return{
      foo:'bar'
    }
  }
}
// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
  data: {
    foo: 'bar'
  }
})

Prop 定义应该尽量详细。
在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。
细致的 prop 定义有两个好处：
它们写明了组件的 API，所以很容易看懂组件的用法；
在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

props:{
	status:String
}
props:{
   status:{
		type:Sting,
		required:true,
		validator:function(value){
	      return [
		    'syncing',
		    'synced',
		    'version-conflict',
		    'error'
		  ].indexOf(value) !== -1
	    }
	}
}

为 v-for 设置键值
避免 v-if 和 v-for 用在一起必要
永远不要把 v-if 和 v-for 同时用在同一个元素上。
为组件样式设置作用域必要
对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。

class="button button-close"
<style scoped>

:class="[$style.button,$style..buttonClose]"
<style module>

私有 property 名必要
使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $yourPluginName)。

/\

组件文件

只要有能够拼接文件的构建系统，就把每个组件单独分成文件。

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

基础组件名
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

单例组件名
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

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

组件名中的单词顺序
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

自闭合组件
在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

模板中的组件名大小写
对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
或者 
<!-- 在所有地方 -->
<my-component></my-component>

JS/JSX 中的组件名大小写
JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串。

完整单词的组件名
组件名应该倾向于完整单词而不是缩写。

Prop 名大小写
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

多个 attribute 的元素
多个 attribute 的元素应该分多行撰写，每个 attribute 一行。

在 JavaScript 中，用多行分隔对象的多个 property 是很常见的最佳实践，因为这样更易读。模板和 JSX 值得我们做相同的考虑。

<MyComponent
foo="a"
bar="b"
baz="c"
/>

模板中简单的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

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

简单的计算属性
应该把复杂计算属性分割为尽可能多的更简单的 property。

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

带引号的 attribute 值
非空 HTML attribute 值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。

在 HTML 中不带空格的 attribute 值是可以没有引号的，但这鼓励了大家在特征值里不写空格，导致可读性变差。

<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">

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

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

这是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。

副作用 (触发组件外的影响)

el
全局感知 (要求组件以外的知识)

name
parent
组件类型 (更改组件的类型)

functional
模板修改器 (改变模板的编译方式)

delimiters
comments
模板依赖 (模板内使用的资源)

components
directives
filters
组合 (向选项里合并 property)

extends
mixins
接口 (组件的接口)

inheritAttrs
model
props/propsData
本地状态 (本地的响应式 property)

data
computed
事件 (通过响应式事件触发的回调)

watch
生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
非响应式的 property (不依赖响应系统的实例 property)

methods
渲染 (组件输出的声明式描述)

template/render
renderError
元素 attribute 的顺序
元素 (包括组件) 的 attribute 应该有统一的顺序。

这是我们为组件选项推荐的默认顺序。它们被划分为几大类，所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。

定义 (提供组件的选项)

is
列表渲染 (创建多个变化的相同元素)

v-for
条件渲染 (元素是否渲染/显示)

v-if
v-else-if
v-else
v-show
v-cloak
渲染方式 (改变元素的渲染方式)

v-pre
v-once
全局感知 (需要超越组件的知识)

id
唯一的 attribute (需要唯一值的 attribute)

ref
key
双向绑定 (把绑定和事件结合起来)

v-model
其它 attribute (所有普通的绑定或未绑定的 attribute)

事件 (组件事件监听器)

v-on
内容 (覆写元素的内容)

v-html
v-text
组件/实例选项中的空行
你可能想在多个 property 之间增加一个空行，特别是在这些选项一屏放不下，需要滚动才能都看到的时候。