10、内容 (复写元素的内容)
v-html
v-text
属性
【私有属性名】（必要）
在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀，并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_ )
//bad
methods: {update: function () { }}
//bad
methods: {_update: function () { } }
//bad
methods: {$update: function () { }}
//bad
methods: {$_update: function () { }}
//good
methods: { $_myGreatMixin_update: function () { }}
【组件的data必须是一个函数】（必要）
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数
//bad
Vue.component('some-comp', {
data: {
foo: 'bar'
}
})
//good
Vue.component('some-comp', {
data: function () {
return {
foo: 'bar'
}
}
})
【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）
//bad
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
//good
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）
//bad
computed: {
price: function () {
var basePrice = this.manufactureCost / (1 - this.profitMargin)
return (
basePrice -
basePrice * (this.discountPercent || 0)
)
}
}
//good
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}
【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）
//good
props: {
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
}
}
谨慎使用
1、元素选择器应该避免在 scoped 中出现
在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的
//bad
<style scoped>
button {
background-color: red;
}
</style>
//good
<style scoped>
.btn-close {
background-color: red;
}
</style>
2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop
3、应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线