多人协作开发Vue统一代码风格
原创
组件命名
Vue.component('todo-item',{
})
export default {
name: 'TodoItem'
}Vue data 数据必须是一个函数
如果
`data是一个对象时， 所有Vue 实例都公用一份data， 如只想改动某一块，所有模块都会跟着改变。 如何阻止呢， 实现每个组件实例都可以管理自己的数据？`在 JavaScript 中，在一个函数中返回这个对象就可以了：
Vue.component('some-comp', {
data: function () {
return {
foo: 'bar'
}
}
})
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}Prop 定义详细
在组件之间传递数据时：
- 父组件 向 子组件 传递数据时，通过 在子组件上动态绑定传值，然后在子组件中，通过Prop 来接收使用即可。
一般我们会直接在Prop 直接接收父组件动态绑定的key，没有类型约束，这样父组件传递任何类型数据都可以，这就存在一定的缺陷了。 eg： 例如，某个key 只能传递number类型， 你传递过来的是 string 类型， 这不就尴尬了。 // 正确做法 props: { status: { type: String, // 类型 required: true // 必填 } }
Prop 大小写
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>V-for 设置key的必要性
在组件上总是必须用
key配合v-for，以便维护内部组件及其子树的状态。
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>永远不要把 v-if 和 v-for 同时用在同一个元素上。
- 当 Vue 处理指令时，
v-for比v-if具有更高的优先级 - 一般要用到
v-for与v-if连用时， 会将v-for的数据 进行computed处理后返回对应的数据 来使用
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>v-for与v-if分开 使用， 一般将v-if放在v-for的最外层
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>为组件样式设置作用域
在为组件写CSS 样式时， 如果不为你单个组件样式添加样式作用域的话，它会影响全局样式。 在
App.vue顶级组件中，它的样式是全局的. 如何解决单组件样式影响全局呢？ 官方提供了3中解决方案
scoped Style 中加入 scoped使用CSS Modules来设定CSS 作用域`基于 class 的类似 BEM的策略
// 1, scoped
<template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>
//2. CSS Modules
<template>
<button :class="[$style.button, $style.buttonClose]">X</button>
</template>
<!-- 使用 CSS Modules -->
<style module>
.button {
border: none;
border-radius: 2px;
}
.buttonClose {
background-color: red;
}
</style>
//3.BEM
<template>
<button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
border: none;
border-radius: 2px;
}
.c-Button--close {
background-color: red;
}
</style>单文组件文件命名大小写 驼峰命名
1. 第一种方式
components/
|- MyComponent.vue
2. 第二种方式
components/
|- MyComponent.vue基础组件命名
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
components/
|- BaseButton.vue
|- BaseTable.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
|- BaseIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue模板中组件名大小写
单文件组件模板
`PascalCas*Dom 模板中kebab-case
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
<!-- 在所有地方 -->
<my-component></my-component>多个 attribute 的元素应该分多行撰写，每个 attribute 一行。
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>让计算属性更简单
- 当每个计算属性都包含一个非常简单且很少依赖的表达式时，撰写测试以确保其正确工作就会更加容易。
- 简化计算属性要求你为每一个值都起一个描述性的名称，即便它不可复用。这使得其他开发者 (以及未来的你) 更容易专注在他们关心的代码上并搞清楚发生了什么。
让 Computed 更精简，直观
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}指令缩写
动态绑定属性
v-bind=======：动态绑定事件v-on=======@动态绑定插槽v-slot======#官方建议： 要么都用简写，要么都用v- 开头的， 统一规范。
<input
:value="newTodoText"
:placeholder="newTodoInstructions"
>
<input
@input="onInput"
@focus="onFocus"
>
绑定插槽
<template #header>
<h1>Here might be a page title</h1>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>减少在 scoped 中使用 元素选择器
在
scoped样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
❌不要这样使用
<template>
<button>X</button>
</template>
<style scoped>
button {
background-color: red;
}
</style>
✔正确使用
<template>
<button class="btn btn-close">X</button>
</template>
<style scoped>
.btn-close {
background-color: red;
}
</style>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
