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

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

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

var myGreatMixin = {// ...
  methods: {$_myGreatMixin_update: function () {// ...
    }}
}

// 反例
Vue.component('TodoList', {// ...
})Vue.component('TodoItem', {// ...
})// 好例子
components/
|- TodoList.js
|- TodoItem.js
components/
|- TodoList.vue
|- TodoItem.vue

// 反例
components/
|- mycomponent.vue
components/
|- myComponent.vue// 好例子
components/
|- MyComponent.vue
components/
|- my-component.vue

// 反例
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
// 好例子
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

// 反例
components/
|- Heading.vue
|- MySidebar.vue// 好例子
components/
|- TheHeading.vue
|- TheSidebar.vue

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

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

// 反例
Vue.component('myComponent', {// ...
})
import myComponent from './MyComponent.vue'
export default {name: 'myComponent',// ...
}
export default {name: 'my-component',// ...
}
// 好例子
Vue.component('MyComponent', {// ...
})
Vue.component('my-component', {// ...
})
import MyComponent from './MyComponent.vue'
export default {name: 'MyComponent',// ...
}

// 反例
props: {'greeting-text': String
}
<WelcomeMessage greetingText="hi"/>
// 好例子
props: {greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

<!--反例-->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>
<!--好例子-->
<imgsrc="https://vuejs.org/images/logo.png"alt="Vue Logo"
>
<MyComponentfoo="a"bar="b"baz="c"
/>

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

// 反例
computed: {price: function () {var basePrice = this.manufactureCost / (1 - this.profitMargin)return (basePrice -basePrice * (this.discountPercent || 0))}
}
// 好例子
computed: {basePrice: function () {return this.manufactureCost / (1 - this.profitMargin)},discount: function () {return this.basePrice * (this.discountPercent || 0)},finalPrice: function () {return this.basePrice - this.discount}
}

<!--反例-->
<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>
<!--好例子-->
<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">

好例子
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style><!-- ComponentA.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

<!--反例-->
<div v-if="error">错误：{{ error }}
</div>
<div v-else>{{ results }}
</div>
<!--好例子-->
<divv-if="error"key="search-status"
>错误：{{ error }}
</div>
<divv-elsekey="search-results"
>{{ results }}
</div><p v-if="error">错误：{{ error }}
</p>
<div v-else>{{ results }}
</div>